React TIL 05

Nabang Kim·2021년 7월 12일

React

목록 보기

5/8

2021년 7월 12일에 작성된 문서 1번 입니다.
React 배운 내용을 정리했습니다.

Props & State Intro

State VS Props

state는 내부에서 변화하는 값
- 나이
- 현재 사는 곳
- 취업 여부
props는 외부로부터 전달받은 값
- 이름
- 성별

ON/OFF 스위치 토글의 State

	{isOn : true}
	{isOn : false}

카운터 버튼의 State

	// 현재 숫자 값
	{count : 0}
	{count : 3}
	{count : 6}

Props

props의 특징

웹 어플리케이션의 컴포넌트의 속성(property)을 의미. (외부로부터 전달받은 값)
부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값.
- React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 React 엘리먼트를 반환한다.
- 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다.
props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다.
props는 외부로부터 전달받아 변하지 않는 값이다. 그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체다.

Props

하위 컴포넌트에 전달하려는 값(data)과 속성을 정의한다.

props를 써서 정의된 값과 속성을 전달한다.

전달받은 props를 렌더링 한다.

props를 사용하기 위해 <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>
  );
};

//<Parent>, <Child> 컴포넌트 선언

전달하고자 하는 속성을 정의한다. (React 에서 속성 및 값을 할당하는 방법 : 전달하고자 하는 값을 중괄호 {} 를 이용하여 감싼다.)

// Child에 값과 속성을 정의 (대략적인 형식임.)
<Child attribute={value} />

//1. text 라는 속성을 선언
//2. 이 속성에 "I'm the eldest child"라는 문자열 값을 할당
//3. <Child> 컴포넌트에 전달
<Child text={"I'm the eldest child"} />

이제 <Parent> 컴포넌트에서 전달한 "I'm the eldest child"라는 문자열을 <Child> 컴포넌트에서 받는다. (함수에 인자를 전달하듯, React 컴포넌트에 props 를 전달하면 되고, 이 props 가 필요한 모든 데이터를 가지고 온다.)

function Child(props) {
  return (
    <div className="child"></div>
  );
};
//<Child> 컴포넌트에서 props 매개변수 사용

props를 전달 받았으니, 이 props 를 렌더링 한다. props 를 렌더링하려면 JSX 안에 직접 불러서 사용하면 되지만, props 는 객체고, 이 객체의 { key : value } 는 <Parent> 컴포넌트에서 정의한 { attribute : value } 의 형태를 띈다. 따라서 JavaScript 에서 객체의 value 에 접근할 때 dot notation 을 사용하는 것과 동일하게 props 의 value 또한 dot notation 으로 접근할 수 있다.

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};
//<Child> 컴포넌트에서 props.text 렌더링

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

State

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

State hook, useState

useState 사용법

React에서는 state 를 다루는 방법 중 하나로 useState 함수를 제공한다.

useState 를 이용하기 위해서 React로부터 useState 를 불러와야 한다.

    import { useState } from "react";
    // useState 불러오기 (import 사용)

이후 useState 를 컴포넌트 안에서 호출한다. useState 를 호출한다는 것은 "state" 라는 변수를 선언하는 것과 같고, 이 변수의 이름은 아무 이름으로 지어도 된다. 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.

    function CheckboxExample() {
    // 새로운 state 변수를 선언
    // 여기서는 이것을 isChecked로 이름을 지음.
      const [isChecked, setIsChecked] = useState(false);
    //isChecked, setIsChecked는 useState의 리턴값을 구조 분해 할당한 변수
    //useState 문법


    function CheckboxExample() { // useState 구조 분해 할당
      // 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);
      // const [state 저장 변수, state 갱신 함수] 
      // = useState(state 초기 값);

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

state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용. 여기서는 isChecked 가 boolean 값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용.

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

State 갱신하기

state를 갱신하려면 state 변수를 갱신할 수 있는 함수인 setIsChecked 를 호출.
input[type=checkbox] 엘리먼트의 값이 변경되면 onChange 이벤트가 발생.
사용자가 체크박스 값을 변경하면 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>
      );
    }
	// 컴포넌트의 상태가 변경 될 때 마다 새롭게 호출되고, 리렌더링