본문 바로가기

전체 글59

[React-Redux] 리액트에 리덕스 적용하기 - 노래 리스트 만들기(1) 일주일 정도 리덕스, 리덕스 리액트 공부를 했는데 100% 이해는 하지 못했다😂 이러다간 계속 공부만 하게될 거 같아서 일단 이해한 부분, 활용해 볼 수 있는 부분까지 정리해두고 모르는 건 다시 찾아보고 배우면서 이해하려고 한다. 아래 링크로 걸어둔 두 번째 레퍼런스를 따라서 만들어 봤다. 구현하고자 하는 기능은 노래 목록을을 화면에 출력하고, 해당 항목을 클릭할 때 그 항목의 세부사항이 나오는 기능이다. 여기에 추가로 input 창에 입력한 userData를 버튼을 누르면 화면에 출력하는 것까지구현해 보려려 했으나, 맘처럼 잘 안돼서,,ㅠㅠ!!! 일단 오늘은 인풋창에 입력하면 바로 화면에 출력되게까지만 구현해 봤다.. 방법을알게 되면 다시 이 글에 추가하려고 한다. 1. 리액트 리덕스 환경셋팅 $ cr.. 2021. 11. 18.
[Redux] 리덕스 기본구조 이해하기 미루고 미뤘던,,, 리덕스 공부를 다시 시작했다. 전에 인강 살짝씩 들었을때 음.,,,, 뭔말인지 정말 이해가 안가서 이번에 공부를 시작하기 전에 많이 위축돼 있었는데 제로초님 인강 듣고 조금은 이해가 갔다. (다행,,, 계속 이해 안될까봐 걱정했는데😂) 강의 내용을 바탕으로 리덕스를 왜 사용하는지, 기본 구성을 어떻게 만들어야 하는지에 대해 정리하려고한다. 리덕스는 어떤 상황에서 써야할까? 리액트를 사용해서 프로젝트를 만들다 보면 props로 데이터를 넘겨받는데 한계가 있다. 부모-> 자식으로 넘겨주는 구조인데, 만약 ... ->조부모-> 부모 -> 자식 ->... 이런식으로 과정이 늘어날 경우에는? 그리고 만약 조부모의 데이터 요소를 자식요소에서 사용해주기 위해 일부러 부모요소까지 거쳐서 자식에게 데.. 2021. 11. 12.
[React] 리액트에서 map함수 사용하기 리액트에서 배열을 수정할 필요가 있을때 자바스크립트의 배열수정 함수인 push, pop 등은 사용하지 못한다. 위 함수들은 기존 배열을 그대로 가져다가 변경해주는 것이기 때문에 리액트가 어떤 항목이 바뀌었는지 인식하지 못하는 문제가 발 생할 수 있다. 리액트의 렌더링 기준은 예전 스테이트와 현재 스테이트가 달라졌을 때를 기준으로 한다. 대신 map함수를 사용할 수 있다. 어떻게 사용해야 하는지 간단한 예시를 들어서 기록하려고 한다. 1. 기본 사용방법 상황) state로 만들어둔 배열을 map함수를 사용해서 안에 하나씩 넣어서 화면에 출력 import "./App.css"; import React, { useState } from "react"; function App() { const [cookies,.. 2021. 11. 11.
[React] 함수형 컴포넌트 vs 클래스형 컴포넌트 비교(2) 원래 한 포스트에 다 쓰려고 했는데 생각보다 글이 길어져서 분리했다. 이번글에는 함수형 컴포넌트를 정리하고 함수형과 클래스형이 어떻게 다른지 비교해보려한다. 함수형 컴포넌트는 함수선언 + 리턴 구조로 클래스보다는 간결하고 직관적이다. 기본적으로 써줘야하는 구성이 적기때문에 클래스컴포넌트 방식보다 코드길이는 좀더 짧다. 함수형에서는 state를 객체형식이 아니라 각각 다 분리해서 써주는게 좋다. 만약 값을 한번에 변경하는 때는 객체형식으로 써도 상관이 없지만, 객체 구성요소 중에 한개의 요소만 변경하고 싶을 때는 좋지 않은 방법이다. 왜냐하면 객체요소중에 한개만 변경하면 다른 구성요소들은 아예 state에서 삭제된 상태로 인식하기 때문이다. 그렇기 때문에 웬만하면 state 관리가 용이하게 분리해서 써주는.. 2021. 11. 10.
[React]함수형 컴포넌트 vs 클래스형 컴포넌트 비교(1) 몇년 전까지만 해도 리액트에서는 Class로 컴포넌트를 생성하는 방식을 사용해왔다. 하지만 내가 리액트 공부를 시작할때는 공식문서에서도 함수형컴포넌트를 사용하는 것을 권장하고 있었기 때문에 처음 배울 때 함수형으로 배웠다. 공부를 하다보면 구글링을 통해 해결방법을 찾아야 하는일이 많은데 아무래도 함수형이 쓰이게 된지 오래되지 않아서Class형으로 작성된 레퍼런스들이 많기때문에 클래스형 코드를 보고 함수형과 어떤 부분이 차이가 있는지 알아보고자 공부했다. 아래의 코드는 간단한 구구단게임 예제를 만드는 코드이다. 1. 클래스형 컴포넌트 : class component 선언 + render(사용자 화면에 보이는 부분) 으로 나눠서 작성해줘야한다. render 부분은 사용자가 볼 수 있는 화면이다. state에.. 2021. 11. 10.
[React] 웹팩 설치하며 리액트 구동 원리 알기 리액트로 새로 작업을 할 때 npx create-react-app 폴더명또는 yarn create-react-app 폴더명 명령어를 사용해서 시작을 하는데, 이 명령어를 입력하면 리액트로 작업을 하기위한 준비를 자동으로 해준다. 자동으로 실행되는 과정과 원리를 알아보고 이해하려고 강의를 듣고 정리해본다. 1. package.json 설치 npm init 2. 리액트 돔 설치 npm i react react-dom 3. 웹팩설치(리액트 할때 필요한 웹팩, 웹팩cil를 설치해줌 npm i -D webpack webpack-cli 이 과정까지 하고 package.json에 들어가보면 잘 설치된걸 확인 할 수 있다. dependencies에는 실제 서비스에서 쓰이는 것들이 기록되고, 개발에만 쓰이는 것들은 de.. 2021. 11. 10.

티스토리툴바