React로 작업 시 이벤트를 수신하는 방법은?
리액트는 선언형 코드이다.
바닐라 자바스크립트에서 했던 것 처럼 수동으로 이벤트 리스너(예:"addEventListner"를 통해)를 추가하면 안된다. 이는 명령형 코드이기에 해당 코드로는 React 기능을 사용하지 않으며 React 컴포넌트 외부에 있는 일부 함수를 트리거하므로 React 컴포넌트 상태와 상호 작용할 수 없다.
onClick과 같은 이벤트 리스너 프로퍼티에는 어떤 값을 전달해야 하나?
이벤트가 발생했을 때 실행해야 하는 함수의 포인터
실행될 함수의 “포인터”를 onClick 등의 값으로 전달해야 한다. 그러면 이벤트가 발생했을 때 “사용자를 대신하여” React가 함수를 실행한다.
- 해당 이벤트가 발생했을 때 실행해야 하는 코드는 인라인 코드 보다는 함수로 작성하여 실행될 함수의 포인터를 전달하는 방식이 더 클린하게 코드를 작성할 수 있는 방법이다.
- onClick 등의 값으로 함수를 호출해서는 안된다. 단지 포인터를 전달하면 이벤트 발생시 리액트가 그 함수를 실행해 준다.
어떻게 하면 컴포넌트 중 하나에서 부모 컴포넌트, 즉 상위 수준으로 통신할 수 있나?
프로퍼티를 통해 함수를 받아들이고 이를 하위 수준인 자식 컴포넌트 내부에서 호출하고 해당 함수를 부모 컴포넌트에 전달하는 방식으로 일부 작업을 트리거할 수 있다.
JavaScript에서 함수는 단순한 객체(일반 값)이므로 프로퍼티를 통해 값을 컴포넌트에 전달할 수 있다. 그리고 컴포넌트가 해당 함수를 호출하면 함수가 실행된다. 이런 식으로 부모 컴포넌트에 정의된 함수를 자식 컴포넌트 내부에서 트리거할 수 있다.
컴포넌트가 화면에 표시하는 내용은 어떻게 변경할 수 있나?
useState를 통해 “상태”값을 생성해 JSX에서 변경 및 출력한다.
변경 및 사용에 일반 JS 변수 대신 추가적인 “상태” 개념이 필요한 이유는 무엇인가?
표준 JS 변수는 React 컴포넌트를 재평가하지 않기 때문이다.
React는 일부 변숫값의 변경 여부에 별 관심이 없다. 컴포넌트 함수를 재평가하지도 않는다. 등록된 상태 값(useState를 통해 생성)이 변경되었을 때만 재평가가 이루어진다.
useState에 관한 설명
useState를 호출하여 새로운 상태를 생성할 수 있다. (O)
인수로(optional) 초기 상태 값을 받는다. (O)
정확히 두 요소(상태 변수, 상태 업데이트 함수)로 이루어진 배열을 반환한다. (O)
useState로 생성된 컴포넌트 상태는 어떻게 업데이트할 수 있나?
상태 업데이트 함수를 호출한다.
useState는 정확히 두 요소로 이루어진 배열을 반환한다. 두 번째 요소는 언제나 상태에 새 값을 설정하기 위해 호출하는 함수이다. 해당 함수, 세터 함수인 setState()를 호출하면 React가 컴포넌트를 재평가하도록 트리거한다.
하나의 단일 컴포넌트로 얼마나 많은 상태를 관리할 수 있나?
상태를 slice(구분)해서 원하는 만큼 상태를 가질 수 있다.
컴포넌트 하나가 가질 수 있는 state 개수는 원하는 만큼!이다.
보통 각각의 상태를 관리할 수 있도록 slice 해서 state를 여러개 만들거나, 객체로 하나로 묶어 상태를 관리한다.
아래 코드 스니펫에서 틀린 것은?
const [counter, setCounter] = useState(1);
...
setCounter(counter + 1);이전 상태에 의존하는 상태를 업데이트하기 위해서는, 상태 업데이트 함수의 "함수 양식"을 대신 사용해야 한다.
const [counter, setCounter] = useState(1);
...
setCounter((prevState) => prevState + 1 );
Always have hope🍀 & constant passion🔥