[React] - Props/State 제대로 알고가기!

 

리액트에서 컴포넌트는 하나의 기능 단위로 구분된 코드 모음, 즉 데이터 + 화면이 같이 존재한다 .

따라서 컴포넌트 내부 조직은 데이터가 변경되면 화면이 바뀌는, 데이터 중심으로 동작한다. 컴포넌트에서 외부로부터

받아오는 데이터는 props, 컴포넌트 안에서 바뀌는 데이터는 state로 구분할 수 있다. 

 

 

props란?

prpos란 컴포넌트의 프로퍼티(properties)를 의미한다.

 

자바스크립트에서 함수를 생각하면 이해를 하기 쉽다. 함수를 전달 인자와 함께 호출하면, 호출된 함수 내부에서 그 전달 인자를 매개변수로 받아와 접근할 수 있듯이, 상위 컴포넌트에서 호출된 하위 컴포넌트에 속성 값을 전달하면, 그 속성 값 props라는 객체를 하위 컴포넌트에서 접근 할 수 있다.

 

실제 함수를 호출할 때 처럼 괄호 안에 데이터를 전달하는 것은 아니고, HTML에서 어트리뷰트를 설정할 때처럼 작성하면 된다.

 

우선 <Parent> 와 <Child> 라는 컴포넌트를 선언하고, <Parent> 컴포넌트 안에 <Child> 컴포넌트를 작성합니다.

 

하위 컴포넌트 Child가 속성들을 props로 받아온다. 

이렇게 상위 컴포넌트로부터 전달되는 데이터(객체)를 props라고 하며, 함수와 마찬가지로 props 이외에 다른 이름으로 가져올 수 도 있다. 상부에서 하부로 전달되는 단방향 흐름을 가지고 있다. 

전달받은 prpos 객체는 변경할 수 없는 읽기 전용이다!

 

prpos의 특징

• 컴포넌트의 속성(property)을 의미합니다. 이전 State & Props Intro에서 잘 설명되었듯, props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다.
• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있습니다.
• 객체 형태입니다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다.
• props는 읽기 전용입니다. props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값입니다. 그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체입니다. 함부로 변경되지 않아야 하기 때문입니다.

 

prpos를 왜 사용할까?

컴포넌트 외부에서 props를 전달받아와 사용하는 이유가 무엇일까?

그 이유는 바로 "재사용"이다. 우리가 함수를 사용하는 이유와 같은데, 만들어진 함수에 각각 다른 값을 전달하여 다른 결과를 도출시킴으로써 함수를 재사용하고, 같은 코드를 작성하는 번거로움을 줄일 수 있다.

 

컴포넌트도 이와 동일하다. 유튜브의 알고리즘 추천 화면을 생각해보면 각각의 동영상들은 모두 같은 포맷을 가졌다. 

컴포넌트에서 다른 점은 데이터뿐인데, 이 데이터가 외부에서 전달되지 않는다면 컴포넌트 내부에서 이 데이터를 정의해야한다. 

 

우리가 이런 코드의 중복을 방지하기 위해서 함수를 사용하는 것처럼, 컴포넌트도 동일하게 생각하면 된다.

서로 다른 데이터를 전달해 컴포넌트를 동적으로 생성하는 것이다. 그리고 이 때는 배열의 map 메서드를 활용해서 각각 다른 props를 전달받는 컴포넌트를 생성할 수 있다. 

 

state란 무엇인가?

외부에서 전달되는 변경되지 않는 값이 props 라면, 컴포넌트 내부에서 변경되는 데이터는 state라고 할 수 있다.

 

useState 사용법

React에서는 state 를 다루는 방법 중 하나로 useState 라는 특별한 함수를 제공합니다. useState 를 호출한다는 것은 "state" 라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무 이름으로 지어도 됩니다. 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않습니다.

import { useState } from "react";

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 초깃값