Udemy useState

---

이벤트 핸들

모든 on props, 모든 이벤트 핸들러 props는 값으로 함수가 필요하다.

이 함수들은 이벤트가 발생했을 때 실행된다.

• 함수의 이름 : Handler로 끝나도록 함. 이것은 선택!!

리액트 작동 방식

컴포넌트는 함수형이다. 호출할 컴포넌트 코드가 더 이상 남아있지 않을 때까지 JSX코드를 통과한다.

따라서, state라는 개념으로 변화를 감지시킨다.

State

useState 훅은 항상 두 개의 요소가 있는 배열을 항상 반환한다.

첫 번째 요소는 현재 상태값이며 두 번째 요소는 첫 번째 요소를 업데이트하는 함수이다.

컴포넌트별 인스턴스를 기반으로 해서 공통된 컴포넌트는 각 독립적인 state를 갖는다. 예를 들어, 버튼 클릭 시 title이 바뀌는 컴포넌트를 5개 복사했는데, 하나의 버튼을 누른다고 5개의 title이 모조리 바뀌는 것이 아니라 버튼을 클릭한 컴포넌트 하나만 state값이 변화되어 title이 바뀐다.

이 외에 console.log와 같은 것은 컴포넌트 실행시 동시에 실행되기 때문에 하나의 컴포넌트를 5번 사용하면 console에 5개의 동작을 가지게 된다.

state가 변경되면, 컴포넌트를 다시 불러온다.

• 상태를 업데이트하는 방법 : 유저 이벤트 발생 시 / 타이머 완료시(setTImeout()) 등