[CS] React State & Props Day-21

React 함수 컴포넌트 (React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있습니다.

React Component에 props를 전달할 수 있습니다.

State란?

살면서 변할 수 있는 값을 뜻합니다. (일반적으로 상태)라고 얘기합니다.
컴포넌트 사용 중 변할 수 있는 값

State hook, useState

React에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공합니다.
useState를 사용하기 위해서는 React로부터 useState를 불러와야 합니다. (import 키워드를 통해)

import {useState} from "react";

import 후 useState를 컴포넌트 안에서 호출해 줍니다. useState를 호출한다는 것은 "state"라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무렇게나 지어도 됩니다. state 변수는 React에 의해 함수가 끝나도 사라지지 않습니다.

function CheckboxExample() {
	const [isChecked, setIsChecked] = useState(false);
}

• 문법적으로 보면 isChecked 와 setIsChecked는 useState의 리턴값을 구조 분해 할당한 변수입니다.

구조 분해 할당을 풀어서 보기 위해 예시를 통해 알아보겠습니다.

function CheckboxExample() {
	const [isChecked, setIsChecked] = useState(false);
}

//...

const stateHookArray = useState(false);
const isChecked = stateHookArray[0];
const setIsChecked = stateHookArray[1];

state 갱신하기

• state를 갱신하려면 state 변수를 갱신할 수 있는 함수인 setIsChecked를 호출합니다.

사용자가 체크박스 값을 변경하면 onChange 이벤트가 이벤트 핸들러 함수인 handleChecked를 호출하고 이 함수가 setIsChecked를 호출하게 됩니다. setIsChecked가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신되며, React는 새로운 isChecked 변수를 checkboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링 합니다.

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>
  );
}

이벤트 처리 Hands-on

React의 이벤트 처리(이벤트 핸들링, Event handling) 방식은 DOM의 이벤트 처리 방식과 유사합니다.

React에서 이벤트는 소문자 대신 카멜 케이스 (camelCase)를 사용합니다.

ex) HTML에서 이벤트 처리 방식

<button onclick="handleEvent()">Event</button>

ex) React에서 이벤트 처리 방식

<button onClick={handleEvent}>Event</button>

onChange

input, textarea, select와 같은 폼(form) 엘리먼트는 사용자의 입력값을 제어하는데 사용됩니다. React에서는 이러한 변경될 수 있는 입력값을 일반적으로 component state로 관리하고 업데이트 합니다. onChange 이벤트가 발생하면 e.target.value를 통해 이벤트 객체에 담겨있는 input 값을 읽어올 수 있습니다.

ex) 아래 onChange는 input의 텍스트가 바뀔 때 마다 발생하는 이벤트입니다. 이벤트가 발생하면 handleChange 함수가 작동하며, 이벤트 객체에 담긴 input 값을 setState를 통해 새로운 state로 갱신합니다.

function NameForm() {
	const[name, setName] = useState("");
    
    const handleChange = (e) => {
    	setName(e.target.vallue);
    }
    
    return (
    	<div>
        	<input type="text" value={name} onChange={handleChange}></input>
            <h1>{name}</h1>
        </div>
    )
};

onClick

onClick 이벤트는 말 그대로 사용자가 클릭이라는 행동을 했을 때 발생하는 이벤트 입니다. 버튼이나 a tag를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용하는 이벤트입니다. 그림 위 onChange 예시에 버튼을 추가하여 버튼 클릭 시 input tag에 입력한 이름이 alert를 통해 알림창이 팝업되도록 코드를 추가할 수 있습니다.

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={alert(name)}>Button</button>
      <h1>{name}</h1>
    </div>
  );
};

props란?

일반적으로 변하지 않는 값을 얘기합니다.

props의 특징

컴포넌트의 속성(property)를 의미합니다.
props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값을 얘기합니다.

부모 컴포넌트 (상위 컴포넌트)로부터 전달받은 값입니다.

React Component는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 화면에 어떻게 표시되는지를 기술하는 React Element를 반환합니다. 따라서 최초 렌더링 될 때 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있습니다.

props는 객체 형태입니다. (어떤 타입의 값도 전달할 수 있도록 객체 형태를 가집니다.)

props는 읽기 전용입니다. props는 외부로부터 전달받아 변하지 않는 값입니다. 따라서 props는 함부로 변경할 수 없기 때문에 읽기 전용(read-only)객체가 됩니다.

props 사용 방법

• 하위 컴포넌트 전달하고자 하는 값(data)와 속성을 정의한다.
• props를 이용하여 정의된 값과 속성을 전달한다.
• 전달받은 props를 렌더링한다.

ex) parent와 child 라는 컴포넌트를 선언하고 parent 컴포넌트 안에 child 컴포넌트를 작성합니다.

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

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

React에서 속성 및 값을 할당하는 방법입니다. 다만 전달하고자 하는 값을 중괄호{}를 이용해 감싸줘야 합니다.

<Child attribute={value} />

위 방법을 이용해 text라는 속성을 선언하고, 이 속성에 문자열 값을 할당하여 Child 컴포넌트에 전달해 봅시다.

<Child text={"I'm the eldest child"} />

함수에 인자를 전달하듯이 React Component에 props를 전달하면 되고, 이 props가 필요한 모든 데이터를 가지고 오게 됩니다.

props를 전달 받았으니, props를 렌더링하려면 JSX안에 직접 불러서 사용하면 됩니다. JavaScript 객체의 value에 접근할 때 dot notation을 사용하는 것과 동일하게 props의 value 또한 dot notation으로 접근할 수 있습니다. props.text를 JSX에 중괄호와 함께 작성하면 잘 작동됩니다.

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

Props와 State의 차이

• props는 외부로부터 전달 받은 값
• state는 내부에서 변화하는 값

React 데이터 흐름

React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점입니다.
각각의 컴포넌트를 만들고, 다시 페이지를 조립해 나갈 수 있습니다.

즉 bottom-up(상향식)으로 앱을 만들어 나갑니다. 가장 큰 장점은 테스트가 쉽고 확장성이 좋습니다.
따라서 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일입니다.

트리 구조를 생각하면서 컴포넌트를 만들어 나가는 방법을 배워야 합니다. 어떤 데이터를 어디에 위치할지 결정해야 합니다.

데이터의 흐름은 하향식입니다. 단방향 데이터 흐름(one-way data flow)라는 키워드가 React를 대표하는 설명 중 하나일 정도입니다.

데이터 정의

모든 데이터를 상태에 둘 필요는 없습니다. 사실 상태는 최소화 하는 것이 가장 좋습니다. 상태가 많아질 수록 애플리케이션은 복잡해지기 때문입니다.

• 시간이 지나도 변하지 않을 경우 state가 아닙니다.

상태가 특정 컴포넌트에서 유의미하다면, 특정 컴포넌트에 두면 되니까 크게 어렵지 않습니다. 하지만 하나의 상태를 기반으로 두 개 이상의 컴포넌트가 영향을 받는다면 이 때에는 공통 소유 컴포넌트를 찾아 그 곳에 상태를 위치 시켜야 합니다.

React에서 데이터를 다룰 때는 컴포넌트들간의 상호 관계와 데이터의 역할, 데이터의 흐름을 고려하여 위치를 설정해야 합니다.

정리

• 변화가 필요한 데이터는 state로 정의해야 합니다.

• props의 속성의 이름을 임의로 지정해줄 수 있습니다. 또한 여러 개 지정할 수 있습니다.

• useState를 사용하여 새로운 state를 선언할 때 [] 로 구조 분해 할당하여 사용합니다.

• useState()의 전달인자는 useState가 반환하는 배열의 첫번 째 요소에 넘겨주는 초기 상태값입니다.

• useState가 반환하는 배열의 두 번째 요소는 첫 번 째 요소인 state를 갱신할 수 있는 함수입니다.

• React에서 이벤트를 처리할 때 이름은 camelCase로 설정해야 합니다.
  ex) onClick, onChange 와 같으 해야 적용됩니다.

• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달해야 합니다.

• 이벤트 핸들러를 설정할 때 함수를 호출하는 것이 아니라 함수의 결과값이 전달됩니다.
  onClick={handleIncrease()}와 같이 진행하게 된다면, 리턴값이 onClick으로 전달되어서 함수 자체가 전달되는 것이 아니라, 함수의 결과값이 전달됩니다.

• 이벤트 핸들러는 props로 전달할 수 있습니다.