React - 프롭과 상태

프롭과 상태

프롭(Prop)

정의

• 컴포넌트에 대한 입력
• 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 매커니즘

특징

• 컴포넌트에서 값의 변경이 불가능하다

• 상위 컴포넌트에서 값을 받는다

  • 예시 코드

    //Func2라는 컴포넌트에 "Minseo"라는 데이터의 프롭을 전달함
    <Func2 name="Minseo" />
        
    //다중 프롭 사용시에는 프롭만 추가로 작성하면 동작함
    <Func3 firstName="Minseo" lastName="Kim"/>
    

• 함수 컴포넌트에 매개변수로 전달된 프롭 객체를 통해 프롭에 접근이 가능하다

  • 예시 코드

  //재사용이 불가능함
  function Func1(){
      return <h1>First Output</h1>
  }
    
  //프롭을 통해 데이터를 컴포넌트에 전달함
  function Func2(data)
  {
      return <h1> Hello, {data.name} </h1>
  }
    
    
  //다중 프롭의 사용 예시
  //프롭을 통해 데이터를 컴포넌트에 전달함
  function Func3(data)
  {
      return <h1> Hello, {data.firstName} {data.lastName} </h1>
  }
  

  이제 컴포넌트가 렌더링 될 경우
  Func1 컴포넌트는 ‘First Output’를
  Func2 컴포넌트는 ‘Hello, Minseo’,
  Func3 컴포넌트는 ‘Hello, Minseo Kim’이라는 텍스트를 표시한다

상태(State)

정의

• 컴포넌트 내에서 업데이트 가능한 값

사용 방법

선언

• useState 후크 함수를 이용하여 만듬
• useState 함수는 초기값을 인수로 받고, 첫번째 요소로 이름을, 두번째 인수로 상태 값을 업데이트하는 함수를 가진 배열을 반환함

const [state, setState] = React.useState(초기값);

• setState 함수는 컴포넌트의 상태 객체에 업데이트를 실행하며, 상태가 변경될 경우 컴포넌트가 다시 렌더링 됨
• 주의) setState 함수는 비동기적으로 호출됨
• 예시 코드

//초기값이 30인 age라는 상태 변수를 생성함
const [age, setAge] = React.useState(30);

• 리액트에서 useState 함수를 가져 올 경우 React를 생략하고 바로 useState 함수의 사용이 가능함

//useState 함수 가져오기
import React, {useState} from 'react'

//React를 생략해도 상태 변수가 작동함
const[age, setAge] = useState(30);

• 객체를 이용하여 선언도 가능함
• 예시

const [name, SetName] = useState({
    firstName = 'Minseo',
    lastName = 'Kim'
});

호출

• 호출은 간단하게 {상태 객체의 이름}을 이용하여 가능하다
• 예시 코드

function GetNameComp(){
    const [age, SetAge] = React.useState(30);
    
    return <div> Age : {age} </div>;
}

값의 업데이트

• 상태를 선언할 때 사용한 상태 업데이트 함수를 이용하여 값의 변경이 가능하다
• 업데이트 함수(업데이트 할 값); 의 형태로 사용함
  • 주의) =를 이용하여 직접 상태를 업데이트 할 경우, 리액트가 UI를 다시 렌더링하지 않아 const 함수를 재할당이 불가능 함
• 예시 코드

setAge(25);

• 상태가 여러개 일 경우, useState 함수를 여러번 호출이 가능함
• 예시

//다중 상태의 선언
const [firstName, SetFirstName] = "Minseo";
const [lastName, SetlastName] = "Kim";


//다중 상태의 호출
SetFirstName('Hojun');
SetLastName('Shin');

• 객체를 이용하여 상태를 선언하였을 경우, 다음과 같이 호출이 가능하다

setName({firstName: 'Hojun', lastName: 'Shin'});

• 이외에도 부분적으로 업데이트가 가능하다
  • 부분적 업데이트를 위해서는 spread를 이용한다
  • spread는 ES2018에 도입된 객체 스프레드 구문(…)을 이용하여 작동된다.
  • 예시 코드

//name이라는 상태 객체를 복사하여 firstName을 'Hojun'으로 업데이트 함
SetName({... name, firstName : 'Hojun'});

프롭과의 공통점과 차이점

공통점

• 프롭, 상태 모두 컴포넌트를 렌더링 하기 위한 입력 데이터로, 상태가 바뀌면 다시 렌더링 됨

차이점

• 상태의 값은 프롭의 값과 다르게 컴포넌트 내에서 업데이트가 가능하다
• 프롭은 컴포넌트에 전달되지만, 상태는 컴포넌트 내부에서 관리됨

---

참고한 자료

컴포넌트 State

실전! 스프링 부트와 리액트로 시작하는 모던 웹 애플리케이션 개발.