프론트엔드 기본개념 복습/React 12

[React] 고차 컴포넌트(HOC)

고차 컴포넌트 (HOC, Higher Order Component) 1. 고계함수 (HOF, Higher Order Function) 이미 많은 사람들이 알고 있겠지만 리액트는 함수형 프로그래밍을 지향한다. 그렇기 때문에 리액트의 컴포넌트는 입력값인 props를 전달받고 ReactElement를 반환하는 함수의 형태를 띄고 있으며 상태 관리 라이브러리인 리덕스는 순수 함수와 불변 스토어를 강조하며 함수형에 가까운 프로그래밍 스타일을 권장한다. 리액트의 HOC 역시 함수형 프로그래밍의 개념 중 하나인 HOF에서 유래하였다. HOF는 함수를 인자로 받아서 또 다른 함수를 반환하는 함수를 뜻한다. 함수형 프로그래밍에서는 작은 단위의 범용적 함수를 만든 후 그를 조합하여 재사용가능한 프로그래밍을 구현한다. HO..

2021-09-28 React Component

React Component props를 input으로 하고 UI가 어떻게 보일지 정의하는 React Element를 output으로 하는 함수이다. 1. React Component의 생명 주기 (1) Mount (생성) : 컴포넌트의 인스턴스가 생성되어 DOM 상에 순서대로 호출된다. (2) Update (갱신) : props 혹은 state가 변경되었을 때 일어난다. (3) Unmount(소멸) : 컴포넌트가 DOM 상에서 제거될 때 2. React Component의 인스턴스 속성 → UI 데이터를 관리 (1) props (속성값) - 할당된 후 값을 변경할 수 없다. (불변변수) - 컴포넌트 간에는 무조건 props를 통해 데이터를 주고받는다. - 부모 컴포넌트가 렌더링될 때마다 자식 컴포넌트들..