해당 벨로그는 [코딩앙마] React js 강좌 를 수강하고 작성한 글입니다.
state
state 는 컴포넌트가 가지고 있는 속성값이다.
이 속성값이 변하면, 리액트는 자동으로 UI 를 얻게 업데이트 해준다.
⇒ 개발자는 state 만 잘 관리하면, 화면을 다시 그리지 않아도 되는 편리함이 있다.
DOM 업데이트까지 해줘야 화면상의 이름이 변경될 수 있다.
DOM 을 업데이트해주는 자바스크립트 코드이다.
id=name 인 Element 에 text 를 name 으로 바꿔주고 있다.
지금 name 은 state 가 아니라 단순한 변수이다. → name 은 컴포넌트가 관리하는 상태값이 아니다.
그래서 name 이 바뀌여도 react 는 바뀐 사실을 인지하지 못하며, UI 를 업데이트해주지 않는다.
그럼 어떻게 하면 name 을 state 로 만들 수 있을까? → 첫번째 React hook 인 useState 를 사용한다.
React hook 은 리액트 16.8 버전부터 사용할 수 있다. → 공식문서
초기 리액트는 state, lifecycle 를 관리하는 클래스형 컴포넌트를 만들어야 했다.
그리고 단순히 UI 만 표현해주는 컴포넌트만 함수형으로 제작했다.
하지만 리액트 16.8 부터 모든 컴포넌트를 함수형으로 만들 수 있게 되었다.
React hook 을 이용해서 함수형 컴포넌트도 state, lifecycle 를 관리할 수 있게 되었다.
useState
상태값 관리를 위해 useState 를 사용해보자.
useState 는 import 해야 한다.
useState 는 배열을 반환한다.
const [ A, A’ ] = useState();
⇒ A 는 state 이고 변수명이라고 생각, A’ 는 state 를 변경해주는 함수이다.
const [ A, A’ ] = useState(); → 배열을 구조 분해한 것이다.
setName 함수가 호출되어 name 이 변경되면 → 리액트는 이 컴포넌트를 다시 랜더링해준다.
useState() 의 괄호 안에는 초기값이 들어가면 된다. → useState(’Mike’)
동일한 컴포넌트여도 state 는 각각 관리된다. 다른 state 에 영향을 미치지 않는다.
