브래의 슬기로운 코딩 생활

훅이란 무엇인가? Hooks Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수 •Hook - 갈고리 •원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 기능 •리액트의 state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것 - 이 때 실행되는 함수가 훅 •훅의 이름은 모두 use로 시작 useState() useState() - state를 사용하기 위한 훅 •함수 컴포넌트에서는 기본적으로 state를 제공하지 않기 때문에 state를 사용하려면 useState() 훅을 사용해야 함 useState() 사용법 •useState()를 호..

State State란? •리액트 컴포넌트의 상태 •리액트 컴포넌트의 변경 가능한 데이터 •state는 컴포넌트를 개발하는 개발자가 직접 정의 State 정의할 때 주의사항 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함 -state가 변경될 경우 컴포넌트가 재렌더링 됨 -렌더링이나 데이터 흐름과 관련 없는 값을 포함하면 불필요한 렌더링이 발생하여 성능 저하 -그외 값은 컴포넌트의 인스턴스 필드로 정의 State 정의 •클래스 컴포넌트 - 생성자(constructor)에서 state 정의 •함수 컴포넌트 - useState()라는 훅을 사용해서 정의 State의 특징 •state는 정해진 형태가 있는 것이 아니라, 일반적인 JavaScript 객체 •state는 정의된 이후 자바스크립트..