State
- 살면서 변할 수 있는 값
- 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값
- 외부에서 영향을 받지 않음
Props
- 외부로부터 전달받은 값
- 위로부터 인자와 같이 넘겨받는다
예시
Props : 이름, 성별, 주민번호
State : 나이, 사는 곳, 취업여부, 결혼/연애 여부
-
toggle Switch 가 가지는 State ⇒ On/Off 여부
⇒ 어떠한 자료형으로 표현될 수 있을까?
⇒ isOn이라는 프로퍼티에 값으로 true 나 false의 블린 타입으로 {isOn: true} {isOn:false} 코드 작성 -
Counter 컴포넌트의 State ⇒ 현재 숫자 값
⇒ {count: 0}, + 나 - 버튼을 누르면 State가 변경되게
props
- 컴포넌트의 속성(Property)을 의미
⇒ 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값 - 부모(상위) 컴포넌트에게 전달받은 값
⇒ React 컴포넌트는 JS함수와 클래스로 props를 함수의 전달인자 처럼 받아 이걸 어떻게 화면에 표시하는지 기술하는 React 엘리먼트를 반환
⇒ 컴포넌트가 최초 렌더링될 때 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용 - 객체 형태
⇒ 어떤 타입의 값도 넣어 전달할 수 있도록 - 읽기 전용
⇒ 함부로 변경될 수 없는 읽기전용 객체
⇒ 만약 수정이 가능하다면 하위 컴포넌트에서 수정 시 props를 전달한 상위 컴포넌트 값에 영향을 미칠 수 있게 된다.(React의 단방향, 하향식 데이터 흐름 원칙 위배)
어떻게 사용하지?
- 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의
- props 이용해 정의된 값과 속성 전달
- 절달받은 props 렌더링
부모요소와 자식요소 컴포넌트 선언
function Parent() {
return (
<div className='parent'>
<h1>부모요소</h1>
<Child /> {/*여기에 JSX 속성 및 값 할당*/}
</div>
)
};
function Child() {
return (
<div className='child'></div>
)
}React JSX 속성 및 값 할당하는 방법
- 예시 전달하고자 하는 값을
중괄호 {}로 감싸주기
<Child attribute={value} />- 위에처럼 attribute에 text라는 속성 선언하고 속성 값에 문자열 값 할당해서
<Child>컴포넌트에 전달하기
<Child text={'자식요소'} />부모 컴포넌트에 전달한 값 자식 컴포넌트에서 받아보기
함수에 인자를 전달하듯 React 컴포넌트에 props를 전달하고
이 props가 필요한 모든 데이터를 가지고 옴
function Child(props) {
return (
<div className='child'></div>
);
};⇒ <Child> 컴포넌트에서 props 매개변수 사용
props 렌더링
props를 렌더링 하려면 JSX안에 직접 불러 사용하면 되는데,
props는 객체라고 했으니 <Parent> 컴포넌트에서 정의한 {attribute: value} 형태를 띔
⇒ JS 객체의 value에 접근하듯이 dot notation 사용하면 되며, JSX에 중괄호와 함께 작성하면 됨
function Child(props) {
return (
<div className='child'>
<p>{props.text}</p>
</div>
);
};props.children
props를 전달하는 다른 방법
여는 태그와 닫는 태그 사이에 value 넣어 전달하는 방법
⇒ props.children 이용해 해당 value에 접근해 사용 가능
<Child>value 값</Child><p>{props.children}</p>State
컴포넌트 내에서 변할 수 있는 값, 상태는 React state로 다뤄야 함
React 컴포넌트는 state가 변뎡되면 새롭게 호출되고 리렌더링 된다!!
⇒ 강제로 변경을 시도하면, 리렌더링 되지 않거나 state 가 제대로 변경되지 않음
- 컴포넌트에서 변화가 필요한 데이터를 state로 정해서 사용
- state 변경되면 컴포넌트가 갱신되면서 사용자가 해당 내용 확인 가능
- React 16.8 버전에서 Hook 이 추가되면서 클래스 컴포넌트 작성 안해도 state 사용 가능
- state는 최상위 컴포넌트만 아니라 하위 컴포넌트에도 존재 가능
State hook, useState
useState 사용법
리액트에서 state를 다루는 방법 중 하나로 useState 라는 특별한 함수 제공
useState 불러오기
import { useState } from "react";useState 문법 예시
useState 를 컴포넌트 안에서 호출 ⇒ 이건 "state" 라는 변수를 선언한 것과 같음(변수 이름은 아무거나 상관 없음)
보통 변수는 함수가 끝날 때 사라지지만 state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.
⇒ 문법적으로 보면 아래 예시의 isChecked , setIsChecked 는 useStaate 의 리턴값을 구조 분해 할당한 변수
function CheckboxExample() {
const [isChecked, setIsChecked] = useState(false);
}⇒ 새로운 state 변수를 선언하고 이걸 isChecked 라 부르자
위의 코드를 풀어 쓴다면
const stateHookArray = useState(false);
const isChecked = stateHookArray[0];
const setIsChecked = stateHookArray[1];useState 수도 코드
const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값)⇒ useState를 호출하면 배열을 반환
⇒ 배열의 0번째 요소는 현재 state 변수, 1번째 요소는 이 변수를 갱신할 수 있는 함수, useState의 인자로 넘겨주는 값은 state의 초기값
const [isChecked, setIsChecked] = useState(false);isChecked: state 를 저장하는 변수isetIsChecked: state isChecked 를 변경하는 함수useState: state hookfalse: state 초기값
state 변수에 저장된 값 사용하기
변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용하면 되는데
위의 isChecked 가 블린 값을 가지기 때문에 true , false 여부에 따라 다른 결과 보이도록 삼항연산자 사용
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>state 갱신하기
- state 를 갱신하려면 state 변수를 갱신할 함수인 setIsChecked 호출
갱신 예시(체크박스 컴포넌트)
function CheckboxExample() {
const [isChecked, setIsChecked] = useState(false);
const handleChecked = (event) => {
setIsChecked(event.target.checked);
};
return (
<div className="App">
<input type="checkbox" checked={isChecked} onChange={handleChecked} />
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
</div>
);
}⇒ <input type=checkbox> JSX엘리번트의 값 변경에 따라 isCheck 가 변경되어야 함
⇒ input type=checkbox 엘리먼트 값이 변경되려면 onChange 이벤트 발생(DOM)
⇒ React 에서도 사용자가 체크박스 값을 변경하면 onChange 이벤트가 이벤트 핸들러 함수인 handelChedcked 를 호출, 이 함수가 setIsChecked 를 호출.
setIsChecked 가 호출되면 호출 결과에 따라 isChecked 변수가 갱신되고
React는 새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링
React 데이터 흐름
컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자 혹은 속성 처럼 전달 받을 수 있는데, 데이터를 전달하는 주체는 부모 컴포넌트 가 됨 ⇒ 데이터 흐름 하향식 을 의미
⇒ 단방향 데이터 흐름 이라는 React 대표 설명 중 하나
⇒ 컴포넌트는 props 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못함
모든 데이터를 state(상태) 로 둘 필요는 없다. (최소화 하는게 가장 좋음)
- 부모로부터 props를 통해 전달되면? ⇒ state 아님
- 시간이 지나도 변하지 않으면? ⇒ state 아님
- 컴포넌트 안의 다른 state 나 props를 가지고 계산 가능하면? ⇒ state 아님
state 상태 위치 정하기
특정 컴포넌트에서만 유의미하다면 해당 컴포넌트에만 두면 되는데,
하나의 state를 기반으로 두 컴포넌트가 영향을 받으면 공통 소유 컴포넌트 찾아서 그곳에 state 위치 시키기
⇒ 두 자식의 공통 부모 컴포넌트에 state 위치시키기
