클래스형 Component의 단점을 보완하기 위해 함수형 Component가 등장
하지만 함수형 Component에서는 클래스형 Component의 장점인 state(상태), Lifecycle Method을 사용하지 못 했음
이를 해결하기 위해 Hooks이 등장!
☑️ 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수!!
☑️ Hook은 class 안에서는 동작하지 않음. 대신 class 없이 React를 사용할 수 있게 해주는 것!!
useState가 없었던 시절…
함수형 컴포넌트에서는 state 관리가 불가능했음.
함수형 컴포넌트들은 리렌더링 될 때, 내부의 모든 코드가 재실행되기 때문!
useState를 이용하면 함수형 컴포넌트에서 state(상태) 관리가 가능하다!
리액트는 useState를 통해 생성한 state를 Closure를 이용해 함수형 컴포넌트 scope 밖에 저장한다.
따라서, 컴포넌트가 리렌더링 되어도, state 값이 유지된다.
const App = () => {
const [name, setName] = useState('');
}
☑️ state update 함수 네이밍은 일반적으로 state 값 앞에 set을 붙여서 지어준다.
☑️ state 값은 반드시 setState 함수로만 갱신이 가능하다.