Unit6 - [React] React State & Props

🔥 React State & Props

state : 내부에서 변화하는 값 / ex. 나이, 현재 사는 곳, 취업 여부...
Props : 외부로부터 전달받은 값 / ex. 이름, 성별...

State : 살면서 변할 수 있는 값 = 상태
컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값

1. Props

: 컴포넌트의 속성(property), immutable

• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값
  React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(argument)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트 반환 => 컴포넌트가 최조 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용 가능

• 함부로 변경 될 수 없는 읽기 전용(read-only) 객체
  읽기 전용 객체가 아니라면 prop를 전달받은 하위 컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있다. => React의 단방향, 하향식 데이터 흐름 원칙 위배

  props 사용법

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
   JSX 속성과 값 할당하는 방법 : 전달하고자 하는 값을 중괄호{}로 감싸준다
   <Child attribute={value}/>

2. props를 이용하여 정의된 값과 속성을 전달한다.
   props의 속성은 여러 개 지정 가능

3. 전달받은 props를 렌더링한다.
   props는 객체이고, 이 객체의 {key:value}은 attribute={value}의 형태를 띤다.
   JavaScript에서 객체의 value에 접근할 때와 동일하게 dot notaion 사용

// Parent 컴포넌트 선언, 안에 Child 컴포넌트 작성
function Parent() {
  return (
    <div className="parent">
    <h1>parent</h1>
    // JSX 속성과 값 할당하는 방법, 전달하고자 하는 값을 중괄호{}로 감싸준다
    <Child text={"I'm the eldest child"}/>
    </div>
    );
};

// Child 컴포넌트 선언
function Child(props) {  // props가 필요한 모든 데이터 가지고 온다
  return (
    <div className="child">
    	// 전달받은 props 렌더링, dot notaion 사용해 객체의 값에 접근한다
    	<p>{props.text}</p>   
    </div>
    );
};

props.children

props를 전달하는 방법 : 여는 태그와 닫는 태그 사이에 value를 넣어 전달
props.children 이용해 해당 value에 접근해 사용 가능

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

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

export default Parent;

---

2. State

: 애플리케이션의 상태

• 컴포넌트 내에서 변할 수 있는 값, 상태는 React state로 다뤄야한다.

useState 사용법

1. import 키워드로 useState를 불러온다.

import { useState } from "react";

2. useState를 컴포넌트 안에서 호출한다.
   useState를 호출한다 = state라는 변수를 선언한다 (변수 이름은 상관x)
   일반적인 변수는 함수가 끝날 때 사라지지만 state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.

3. useState를 호출하면 배열을 반환하는데,
   배열의 0번째 요소 = 현재 state 변수, 1번째 요소 = 이 변수를 갱신할 수 있는 함수
   useState의 인자로 넘겨주는 값 = state의 초깃값

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

4. state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용하면 된다.

state 갱신하기

import React, { useState } from "react";

function CheckboxExample() {
  // 새로운 state 변수를 선언, isChecked
  // const [state 저장 변수, state 갱신 함수] = useState(state 초깃값);
  const [isChecked, setIsChecked] = useState(false);
  
  const handleChecked = (event) => {
    // state를 갱신하려고 state 변수를 갱신할 수 있는 함수인 setIsChecked 호출
    setIsChecked(event.target.checked);
  };
  
  return (
    <div className="App">
    	<input type="checkbox" checked={isChecked} onChange={handleChecked}/>
    	// state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용한다
    	<span>{isChecked ? "Checked!" : "Unchecked"}</span>
	</div>
  );
};

export default CheckboxExample;

주의점

• React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 된다.
• React state는 상태 변경 함수 호출로 변경해야한다. ( 강제로 변경 시도x )

---

3. 이벤트 처리

React의 이벤트 처리(Event handling) 방식은 DOM의 이벤트 처리 방식과 유사하다.
단, 아래 몇가지 문법 차이가 있다.

• React에서 이벤트는 소문자 대신 카멜 케이스(camelCase) 사용
• JSX를 사용해 문자열이 아닌 함수로 이벤트 처리 함수(Event handler) 전달

<input>, <textarea>, <select>와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는데 사용된다.
변경될 수 있는 입력값을 일반적으로 컴포넌트의 state로 관리하고 업데이트 한다.

onChange
: input의 텍스트가 바뀔 때마다 발생하는 이벤트
이벤트가 발생하면 해당 함수가 작동하고, 이벤트 객체에 담긴 input값을 setState를 통해 새로운 state로 갱신한다.

import React, { useState } from "react";

function NameForm() {
  const [name, setName] = useState("");
  
  const handleChage = (e) => {
    // `onChange` 이벤트 발생하면 `e.target.value`를 통해 이벤트 객체에 담겨있는 input 값을 읽어온다
    setName(e.target.value);
  }
  
  return (
    <div>
     <input type="text" value={name} onChange={handleChage}></input>
	 <h1>{name}</h1>
    </div>
	)
};
export default NameForm;

onClick
: 사용자가 클릭을 했을 때 발생하는 이벤트
버튼이나 <a> 태그를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용하는 이벤트

import React, { useState } from "react";

function NameForm() {
  const [name, setName] = useState("");
  
  const handleChange = (e) => {
    setName(e.target.value);
  }
  
  const handleClick = () => {
    alert(name);
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
	  // 버튼 클릭 시 input 태그에 입력한 이름이 alert을 통해 알림 창이 팝업 되도록 한다
      <button onClick={handleClick}>Button</button>
	  {/* <button onClick={() => alert(name)}>Button</button> */}
      <h1>{name}</h1>
    </div>
  );
};
export default NameForm;

onClick 이벤트에 함수를 전달할 때, (함수 호출 x)
리턴문 안에서 함수를 정의하거나, 리턴문 외부에서 함수 정의 후 이벤트에 함수 자체를 전달해야한다.
=> arrow function 을 사용하여 함수를 정의해야 해당 컴포넌트가 가진 state에 함수 접근 가능하다.

---

4. React 데이터 흐름

React는 페이지 단위가 아닌 컴포넌트 단위로 개발을 시작한다.

• 상향식(bottom-up)으로 앱을 만든다.
  테스트가 쉽고, 확장성이 좋다 (컴포넌트 계층 구조로 나누는 것이 제일 먼저 해야할 일)

• 하나의 컴포넌트는 한 가지 일만 한다. (단일 책임 원칙)

• 데이터는 위에서 아래로 흐른다.
  컴포넌트 바깥에서 props를 이용해 데이터를 인자(arguments) 또는 속성(attributes)처럼 전달 받을 수 있다.
  데이터를 전달하는 주체는 부모 컴포넌트가 된다. => 하향식(top-down) 데이터 흐름

• React 단방향 데이터 흐름(one-way data flow)을 따른다.

- 상태(state) 위치 정하기
두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때,
공동 소유 컴포넌트(공통의 부모)를 찾아 그 곳에 상태를 위치해야 한다.
데이터를 다룰 때, 컴포넌트들 간의 상호 관계와 데이터의 역할, 데이터의 흐름을 고려해 위치를 설정해야 한다.