이벤트 핸들링

리액트 모든 이벤트 on으로 시작한다.

onClick={clickHandler}

 

 

📌 이벤트 리스너 속성에 함수 전달하는 방법

• onClick 같은 이벤트 리스너 프로퍼티는 이벤트가 발생했을 때 실행해야 하는 함수의 ‘포인터’를 값으로 전달해야 한다.

그래야 이벤트가 발생했을 때 사용자를 대신하여 리액트가 함수를 실행한다.

 

 

📌 부모 컴포넌트로 이벤트 전달하는 방법

• 프로퍼티를 통해 함수를 받아들이고, 이를 자식 컴포넌트 내부로부터 호출하고, 해당 함수를 부모 컴포넌트에 전달하는 방식으로 일부 작업을 트리거 할 수 있다.

자바스크립트에서 함수는 단순한 객에(일반 값)이므로 프로퍼티를 통해 값을 자식 컴포넌트에 전달할 수 있다.

그리고 (전달받은) 자식 컴포넌트가 해당 함수를 호출하면 함수가 실행된다.

이런 식으로 부모 컴포넌트에서 정의된 함수를 자식 컴포넌트 내부에서 트리거 할 수 있다.

 

---

📌 컴포넌트가 화면에 표시하는 내용 변경 방법

• useState를 통해 ‘상태’값을 생성해 JSX에서 변경 및 출력한다.

 

📌 일반 JS 대신 state 개념이 필요한 이유

• 리액트는 일부 변수값 변경 여부에 관심이 없다. 컴포넌트 함수를 재평가하지도 않는다.(리렌더링)

useState를 통해 생성된 ‘등록된 상태 값’이 변경되었을 때만 재평가한다.

 

 

📌 이벤트를 수신하지 않는 방법

언제 사용해야 하는지 아직 감이 안잡히지만.

• 수동으로 이벤트 리스너(ex. addEventListener를 통해) 추가한다.

이건 명령형 코드이기 때문에 이 코드로는 리액트 기능을 사용하지 않으며, 리액트 컴포넌트 외부에 있는 일부 함수를 트리거 하므로 리액트 컴포넌트 상태와 상호작용할 수 없다.