1.State,Props의 개념
1. state
- 컴포넌트 내에서 변할 수 있는 값.
- 일반 JavaScript 객체.
- state의 데이터는 바꿀 수 있으며, 바꿀 때는 setState()를 이용해야 한다.
- class 컴포넌트에서 state를 쓸 때는 컴포넌트의 형태가 클래스이기 때문에 this.state로 사용할 수 있다.
- 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있다.
- props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다.
state Hook
- Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수
- Hook은 class 안에서는 동작하지 않는다.
- class 없이 React를 사용할 수 있게 해 준다.
왜 Hook이 필요한가?
컴포넌트 사이에서 상태 로직을 재사용하기 어렵습니다.
React는 컴포넌트 간에 재사용 가능한 로직을 붙이는 방법을 제공하지 않습니다. (예를 들어, 스토어에 연결하는 것) 만약 이전부터 React를 사용해왔다면, 당신은 render props이나 고차 컴포넌트와 같은 패턴을 통해 이러한 문제를 해결하는 벙법에 익숙할 것입니다. 그러나 이런 패턴의 사용은 컴포넌트의 재구성을 강요하며, 코드의 추적을 어렵게 만듭니다.
복잡한 컴포넌트들은 이해하기 어렵습니다.
우리는 때론 간단하게 시작했지만 관리하기가 힘들어지는 상태 관련 로직들과 사이드 이펙트가 있는 컴포넌트들을 유지 보수해야 합니다. 각 생명주기 메서드에는 자주 관련 없는 로직이 섞여 들어가고는 합니다.
Class은 사람과 기계를 혼동시킵니다.
React에서의 Class 사용을 위해서는 JavaScript의 this 키워드가 어떨게 작동하는지 알아야만 합니다. JavaScript의 this키워드는 대부분의 다른 언어에서와는 다르게 작동함으로 사용자에게 큰 혼란을 주었으며, 코드의 재사용성과 구성을 매우 어렵게 만들고는 했습니다.
이러한 문제를 해결하기 위해, Hook은 Class 없이 React 기능들을 사용하는 방법을 제시합니다. 개념적으로 React 컴포넌트는 항상 함수에 더 가깝습니다.
2. props
- 컴포넌트의 속성(property)을 의미.
- props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값.
- 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당.
- 상위 컴포넌트로부터 전달받은 값.
- React 컴포넌트는 props를 함수의 전달 인자(arguments)처럼 전달받아 이를 기반으로 * 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환.
- 컴포넌트가 최초 렌더링 될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용.
- 객체 형태. (props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가짐.)
- props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체.
읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 됩니다.
즉, 개발자가 의도하지 않은 side effect가 생기게 되고 이는 React의 단방향, 하향식 데이터 흐름 원칙(React is all about one-way data flow down the component hierarchy)에 위배됩니다.
