목표: 버튼을 클릭해서 title바꾸기
이벤트를 설정: on이벤트이름={실행하고싶은함수}
js addEventListner를 jsx에서는 onClick에서
함수를 호출하지 사용할 함수가 담긴 변수를 넣어줌
why? 바로 실행되지 않고 이벤트가 발생했을 때 실행되게 할 수 있도록
리액트는 한번 렌더링이 끝나면 다시 렌더링 되지 않으는다
그래서 나온 필요한 개념이 state
title처럼 데이터(props.title)가 바꼈을 때 화면에도 반영해 줘야 하는데
let tile = props.title;값이 바뀌었을 때 re-evlaluation되지 않는다
그래서 현재 상태로는 다시 렌더링 되지 않기 때문에 화면에 변화가 없다.
컴포넌트도 함수이기 때문에 데이터가 바껴서 화면에 반영해 주기 위해서는 js 함수 처럼 다시 호출해야 한다.
react 라이브러리에서 useState함수 import
변경된 데이터가 반영 되도록 해주는 함수
useState는 리액트 hook중 하나이다.
모든 hook은 컴포넌트 안에 호출되어야 한다
useState를 사용할 때 상태의 기본값을 파라미터로 넣어서 호출
useState를 호출하면 배열이 반환된다.
배열비구조화 할당을 통해 각 원소를 변수에 넣어줌
1. 첫번째 인자는 현재 상태
2. 두번째 인자는 Setter함수
setter함수는 파라미터로 전달 받은 값을 최신상태로 설정해 줌
title=''처럼 값을할당하지 않고 Setter함수를 호출
파라미터에 입력해줄 데이터 넣어줌
이벤트가 발생하여 Setter함수를 호출할때 컴포넌트 function이 재호출된다.
🌞