[React] state, props

 

 

props

컴포넌트 속성을 설정할 때 사용하는 요소로, 부모로부터 전달받은 값을 담고 있다.

props는 객체 형태로, 어떤 형태의 값도 자유롭게 담아서 전달할 수 있다.

또, props는 읽기 전용이므로, 하위 컴포넌트에서는 수정하지 못한다.

이는 리액트에서 데이터 흐름이 top-down의 단방향 흐름이라는 것을 보여준다.

 

이런 특징 때문에 여러 컴포넌트에서 공유하는 데이터가 있다면

해당 컴포넌트들이 공유하고 있는 부모 컴포넌트에 데이터를 위치시키고

props를 통해 각 후손 컴포넌트들에 전달해야 한다.

실습하면서 useState를 어디에 둬야 할지 계속 헷갈렸는데 이 점을 꼭 기억하자!

 

state

컴포넌트 내에서 계속 변하는 값이 state다.

'상태'라는 것은 지속적으로 변화한다는 의미를 내포하고 있다는 것을 떠올려 보자.

useState 훅을 사용하면 state 변수를 선언하고 state를 변경하는 함수(Setter 함수)를 만들 수 있다.

state 변수는 숫자나 문자열, 불리언, 배열, 객체 등 다양한 형으로 설정할 수 있다.

import {useState} from 'react'
const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

 

이벤트 핸들링

state를 변경하는 것은 보통 사용자가 특정 동작을 했을 때일 것이다.

이벤트 핸들링을 통해서 사용자의 동작을 확인하고 그에 맞는 변경을 해 줄 수 있다.

리액트에서 이벤트 핸들링을 할 때는 다음과 같은 점을 주의해야 한다.

• 이벤트 이름은 카멜 표기법으로 작성한다.
• 이벤트에 실행할 자바스크립트 코드가 아닌 함수 형태의 값을 전달한다.
• DOM 요소에만 이벤트를 설정할 수 있다.