Props

의미

웹 애플리케이션에서 해당 컴포넌트가 가진 속성(property)
ex. (일반적으로) 이름, 성별

특징

• Component 간 데이터 전달할 때 사용
• 부모 컴포넌트(상위 컴포넌트)로부터 전달 받은 값 → 외부로부터 전달받은 값
  • React 컴포넌트는 JavaScript의 함수이자 클래스인데, React 컴포넌트는 props를 함수의 전달인자(arguments)처럼 전달 받음
    → 이를 바탕으로 React 엘리먼트(화면에 어떻게 표시되는지를 기술)를 반환
• 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초기값으로 Props를 활용할 수 있음
• 객체 형태: props로 어떤 타입의 값도 넣어 전달할 수 있게 하기 위해
• 읽기 전용(Read-only) : 개발자가 의도하지 않은 side effect를 방지하기 위해
• 클래스 컴포넌트뿐만 아니라 함수형 컴포넌트에서도 사용할 수 있음

  클래스 컴포넌트와 함수 컴포넌트

  • 클래스 컴포넌트: ES6 class 문법을 사용해서 만든 컴포넌트
  • 함수 컴포넌트: 함수 문법을 사용하여 만든 컴포넌트 → Hook을 활용해서 state를 다룸

• props는 여러 개 지정할 수 있음

사용법

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의함
2. props를 이용하여 정의된 값과 속성을 전달함
3. 전달받은 props를 렌더링함

function Parent() {
	return(
		<div className = "parent">
			<h1>I'm the parent</h1>
			<Child text={"I'm the eldest child"}/> //(1)
		</div>
	);
};

function Child(props) { //(2)
	return (
		<div className = "child">
			<p>{props.text}</p> //(3)
		</div>
	);
};

---

State

의미

컴포넌트를 사용하는 동안 컴포넌트 내부에서 변할 수 있는 값
ex. 나이, 현재 사는 곳, 취업 여부, 결혼/연애 여부

사용법

state의 위치

• state가 특정 컴포넌트에서만 유의미하다면, 해당 컴포넌트에만 둠
• 두 개의 자식 컴포넌트가 하나의 state에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 state를 둠

state hook이란

• Hook은 Class없이 React 기능들을 사용하는 방법을 도와주는 함수임
• 특히 state hook은 state를 함수 컴포넌트 안에서 사용할 수 있게 해줌

useState 사용하기

1. 자바스크립트에 useState 불러오기

import { useState } from "react";

2. 컴포넌트 내에서 useState를 호출하는 것은 “state” 변수를 선언하는 것과 동일함

• 선언된 state 변수는 React에 의해 함수가 끝나도 남아있음
• 수도코드

const [state 저장 변수, state 갱신 함수 ] = useState(상태 초기 값);

• 예시
  isChecked : state를 저장하는 변수
  setIsChecked : state isChecked 를 변경하는 함수
  useState : state hook
  false : state 초기값

function CheckboxExample() {
	//새로운 state 변수를 선언하고 isChecked라고 부르기
	const [isChecked, setIsChecked] = useState(false);
	//위의 코드는 다음 세 줄의 코드와 의미가 같음
	//const stateHookArray = useState(false);
	//const isChecked = stateHookArray[0];
	//const setIsChecked = stateHookArray[1];
}

3. JSX 엘리먼트 안에서 state 변수에 저장된 값 부르기

<span>{isChecked ? "Checked!!" : "Unchecked"}</span>

state 갱신하기

• state를 갱신하기 위해 state 변수를 갱신할 수 있는 함수인 setIsChecked 를 호출
• input[type=checkbox]JSX 엘리먼트의 값 변경에 따라서 isChecked가 변경되도록 설정함
  • 사용자가 체크박스 값을 변경하면 onChange이벤트가 이벤트 핸들러 함수인handleChecked를 호출
  • 함수 handleChecked가 setIsChecked를 호출
  • setIsChecked가 호출되면 호출된 결과에 따라 isChecked변수가 갱신
  • React는 새로운 isChecked 변수를 CheckboxExample컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링함

function CheckboxExample() {
	const [isChecked, setIsCheckd] = 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>
	);
};

state hook 사용 시 주의점

• React 컴포넌트는 state가 변경되면 새롭게 호출되고, 다시 렌더링됨
  → 즉, 컴포넌트의 상태가 변경될 때마다 새롭게 호출되고, 다시 렌더링됨
• React state는 상태 변경 함수 호출로 변경해야 함
  강제로 변경을 시도하면, 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않음

---

React의 데이터 흐름

상향식(Bottom-up) 개발 방식

• 페이지 단위가 아닌, 컴포넌트 단위로 시작
• 먼저 컴포넌트를 만들고, 다시 페이지를 조립해나감
• 테스트가 쉽고 확장성이 좋다는 장점이 있음

단방향 데이터 흐름(one-way data flow)

• 데이터 흐름이 하향식(top-down)임
• React는 props를 이용해 데이터를 전달하는 주체인 부모 컴포넌트에서 하위 컴포넌트로 데이터를 전달함

효율적으로 코딩하기

• 하나의 컴포넌트는 한 가지 일만 할 수 있도록 작성
• state가 많아질수록 애플리케이션은 복잡해지는 경향이 있으므로 state를 최소화