이벤트 처리

React의 이벤트 처리(이벤트 핸들링; Event handling) 방식은 DOM의 이벤트 처리 방식과 유사
React 에서 이벤트는 소문자 대신 카멜 케이스(camelCase) 를 사용
JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달

<button onClick={handleEvent}>Event</button>

React 이벤트 처리 방식 예시

  const [msg, setMsg] = useState("");

  const handleChangeMsg = (event) => {
    setMsg(event.target.value);
  };

<textarea className="message" value={msg} onChange={handleChangeMsg} />

onChange 예시
textarea에 새로운 값이 담기면 그 값이 변수에 대한 갱신 함수 setMsg에 들어가고 저장되는 변수 msg 에 담기게 됨.

React 데이터 흐름

React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점
컴포넌트를 먼저 만든 뒤 컴포넌트를 모아 조립 => 상향식(bottom-up)으로 앱을 만듬
테스트가 쉽고 확장성이 좋음

데이터는 위에서 아래로 전해짐
컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자 혹은 속성처럼 전달받을 수 있다.
데이터를 전달하는 주체는 부모 컴포넌트이며 데이터 흐름이 하향식임을 의미
단방향 데이터 흐름(one-way data flow)이라는 키워드가 React를 대표하는 설명 중 하나일 정도로 이 원칙은 중요

---

과제를 하면서 배운것

useState 를 사용하기 위해선 먼저 react에서 import를 해야함
이벤트의 발생으로 인해 state 변수가 변화를 하게 되는 경우가 있다.
한개의 이벤트에 여러가지 state함수가 들어갈 수 있다.
상위 컴포넌트에서 만든 변수를 하위 컴포넌트로 가져가서 사용할 수 있다.(deletetwittler)(확인요망)

마지막으로...

이틀 뒤면 첫번째 HA다. 다행이도 내일은 어린이 날이니까 여지까지 공부했던 내용을 싹 복습할 수 있는 시간이 생겼다. 내일은 TIL이 아닌 복습한 내용을 블로깅해봐야겠다. 복습할 때 스프린트를 새로 clone 해서 다시한번 만들어봐야겠다.