React - Props & State & 이벤트 처리
🎃Props란?
- 컴포넌트의 속성(Property)을 의미한다.
- 성별이나 이름처럼 변하지 않는
외부로부터 전달받은 값
으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당
- 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값
객체
형태!!
- 읽기 전용이다. 함부로 변경될 수 없는 read-only 객체!!
🎄State란?
- 컴포넌트 내부에서 변할 수 있는 값
- React로부터
useState
를 불러와야 한다.
- const [state, setState] = useState(초기값)을 컴포넌트 함수 안에 넣어준다.
- 여기서
state
는 저장 변수
setState
는 갱신 함수이다.
🎁이벤트 처리
- 바닐라 자바스크립트의 DOM처럼 이벤트 핸들링이 있다. 다만 문법적 차이가 있다.
onChange
- 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는 데 사용
onChange
이벤트가 발생하면, 연결되어있는 함수를 통해 담겨있는 이벤트를 실행할 수 있다.
onClick
- 클릭이라는 행동을 하였을 때 발생하는 이벤트
onChange
와 마찬가지로 이벤트 발생
Select
- select tag 는 사용자가 drop down 목록을 열어 그중 한 가지 옵션을 선택하면, 선택된 옵션이 state 변수에 갱신한다.