TIL) 리액트 State & Props 이해하기

React에서 데이터를 다루는 두 가지 방법인 State와 Props

 

State와 Props 차이

Props: 외부로부터 전달받은 값 (인자와 같이 넘겨받을 수 있다.) 함부로 변경될 수 없는 읽기 전용(read-only) 객체

State: 컴포넌트 내부에서 변화하는 값

 

 

어떤 것이 State와 Props에 적합할까?

이름 / Props

성별 / Props

나이 / State (매년 바뀜)

현재 사는 곳 / State (이사할때마다 바뀜)

취업 여부 / State (내 상태에 따라 바뀜)

결혼/ 연애 여부 / State (내 상태에 따라 바뀜)

Toggle Switch / State (스위치를 on/off 여부에 따라 바뀜 // isOn:true, isOn:false)

 

---

Props의 특징 

- 컴포넌트의 속성(property)을 의미한다. 

- 변하지 않는 외부(부모 컴포넌트(상위 컴포넌트))로부터 전달받은 값이고, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. 

- props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태이다. 

- props는 읽기 전용으로 변경불가!!

 

- 이해 필요 React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다.

 

 

Props 사용방법

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

** 렌더링이란 HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말한다.

즉, 화면에 표시할 웹 페이지를 만드는 과정을 뜻한다.

 

 

---

state  다루기

<useState 사용>

1. React로부터 useState 를 불러오기

import { useState } from "react";

2. useState 를 컴포넌트 안에서 호출하기

일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않는다. 

 

아래 예시의 isChecked, setIsChecked 는 useState 의 리턴값을 구조 분해 할당한 변수이다.

 

👇 useState 문법 예시

function CheckboxExample() {
// 새로운 state 변수를 선언하고, 이것을 isChecked 라고 부른다라는 뜻
  const [isChecked, setIsChecked] = useState(false);

 

👇 useState 구조 분해 할당 예시

function CheckboxExample() {
  // 1번 코드를 풀어쓰면
  const [isChecked, setIsChecked] = useState(false); // 1번

  //...

  // 2번 코드와 같다.
  const stateHookArray = useState(false); // 2번
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];
}

 

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

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

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

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

 

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

여기서는 isChecked 가 boolean 값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용한다.

 

👇 JSX에서 삼항연산자 사용 예시

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

 

---

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

 

---

import React, { useState } from "react";
import "./styles.css";

function CheckboxExample() {
  console.log("rerendered?");
  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>
  );
}

export default CheckboxExample;

 

주의!

 

React state는 상태 변경 함수 호출로 변경해야 합니다.

강제로 변경을 시도하면 안된다.

상태 변경 함수 사용은 React와 개발자의 약속이기 때문에 지켜주어야 한다.

강제로 변경을 시도하면, 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않는다.

 

---

React의 이벤트 처리(이벤트 핸들링; Event handling)

• DOM의 이벤트 처리 방식과 유사하다.
• React 에서 이벤트는 카멜 케이스(camelCase)를 사용한다. 
• JSX를 사용하여 함수로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달한다. 

👇 리액트의 이벤트 처리 방식

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

 

👇 HTML에서 이벤트 처리 방식

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

---

<React 에서자주 사용되는 이벤트>

onChange

React 에서는 <input> <textarea> <select>와 같이 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state 로 관리하고 업데이트 한다. 

onChange 이벤트가 발생하면 e.target.value 를 통해 이벤트 객체에 담겨있는 input 값을 읽어올 수 있다. 컴포넌트 return 문 안의 input 태그에 value 와 onChange 를 넣어주었다. onChange 는 input 의 텍스트가 바뀔 때마다 발생하는 이벤트이다. 이벤트가 발생하면 handleChange 함수가 작동하며, 이벤트 객체에 담긴 input 값을 setState 를 통해 새로운 state 로 갱신한다.

 

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

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

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

 

onClick

onClick 이벤트는 말 그대로 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트이다.

버튼이나 <a> tag 를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용하는 이벤트이다.

 

 

👇 버튼 클릭 시 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>
  );
};

➥ onClick 이벤트에 alert(name) 함수를 바로 호출하면 컴포넌트가 렌더링 될 때 함수 자체가 아닌 함수 호출의 결과가 onClick 에 적용된다. 때문에 버튼을 클릭할 때가 아닌, 컴포넌트가 렌더링 될 때에 alert 이 실행되고 따라서 그 결과인 undefined (함수는 리턴 값이 없을 때 undefined 를 반환합니다.) 가 onClick 에 적용되어 클릭했을 때 아무런 결과도 일어나지 않는다.

 

👉 onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라 아래와 같이 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달해야 한다. 단, 두 가지 방법 모두 arrow function 을 사용하여 함수를 정의하여야 해당 컴포넌트가 가진 state에 함수들이 접근할 수 있다.

 

// 함수 정의하기

return (
  <div>
	...
    <button onClick={() => alert(name)}>Button</button>
	...
  </div>
  );
};

// 함수 자체를 전달하기

const handleClick = () => {
  alert(name);
};

return (
  <div>
      ...
    <button onClick={handleClick}>Button</button>
      ...
  </div>
  );
};

 

 

• 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다.
• 데이터를 전달하는 주체는 부모 컴포넌트가 된다. 이는 데이터 흐름이 하향식(top-down) 임을 의미한다.
• 리액트는 단방향 데이터 흐름(one-way data flow)!!

 

😃혹시나 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓