전체 글
Redux
Redux (React 없이도 사용할 수 있는 상태 관련 라이브러리) Redux의 필요성 → 자식 컴포넌트에서 다른 자식 컴포넌트로 state를 전달해줄 때, 부모 컴포넌트에 끌어올리기를 하여 사용한다. 한 두가지의 컴포넌트라면 괜찮지만, 수백개의 컴포넌트라면 상태관리는 매우 복잡해진다. 이에 Redux를 이용한면 상태관리에 용이해진다. 장점 ➀ 상태를 예측 가능하게 만들어준다. ➁ 유지보수 ➂ 디버깅에 유리하다(action과 state log기록 시) ➃ 테스트를 붙이기 쉽다. Redux의 3가지 원칙 ➀ 항상 같은 곳에서 항상 동일한 데이터를 가지고 온다. ➁ state는 읽기 전용이다. ➂ 변경은 순수함수로만 가능하다. - Store : 상태가 관리되는 오직 한 공간 store 안에 필요한 stat..
props와 state
React 개발 방식의 가장 큰 특징은 컴포넌트 단위로 시작한다는 것이다. 컴포넌트를 만들고 조립하는 상향식(bottom-up) 특징을 가지고 있다. 이는 테스트가 쉽고, 확장성이 좋다. 따라서, 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일이다. 컴포넌트는 단일 책임 원칙으로, 하나의 컴포넌트는 한가지 일만 해야한다. 이전 글에서 작성했던 컴포넌트에 대한 보충을 하자면, → 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받는다. → 데이터를 전달하는 주체는 "부모 컴포넌트"이다. → 데이터의 흐름은 하향식 (top-down)이다. → 단방향 데이터 흐름(one-way data flow)을 가진다. 오직 아래의 컴포넌트에만 ..
함수 컴포넌트와 클래스 컴포넌트
컴포넌트 (Component)? → "독립된 모듈"로 소프트웨서 시스템을 교체가 가능하다. → 하나의 기능을 구현하기 위해 여러 종류의 기능을 한꺼번에 묶어놓은 기능이다. (code set) → 재사용이 가능하다. → 기능 자체에 집중할 수 있다. → 에러를 찾을 수 있어 유지보수가 용이하다. React 사용 시, 컴포넌트를 2가지로 정의할 수 있다. React 입장에서 바라보면 2가지 컴포넌트를 동일하다. ➀ 함수 컴포넌트 (가장 간단) function Introduce(props) { return Welcome, {props.name}; } 데이터를 가진 하나의 "props" 객체 인자를 받은 후 React 엘리먼트 반환한다. JavaScript 함수이기 때문에 말 그대로 이름을 붙여주었다. * pr..