시작하기

안녕하세요 :) 오늘은 Back-End 관련 글이 아닌 Front-End 관련 글을 가져왔습니다.
Back-End 관련 글을 작성하다 Front-End 관련 글을 작성하니 기분이 이상하네요 🤣
부족한 글 솜씨입니다만, 충분히 이해가 되시기를 빕니다!

React 컴포넌트에서 다루는 데이터는 2가지가 있습니다.
Props,State 이렇게 2가지가 있는데요. 예시 코드를 통해 차근차근 설명 해드리겠습니다 :)

Props

Props는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달하기 위해 사용되는 녀석입니다.
Props는 자식 컴포넌트에서 변경이 불가능합니다.

Props를 쉽게 이해하는 방법 중 한가지는 함수와 비교하는 것입니다.

함수와 비교

function func_name(parm1, parm2) {
 // Do Stuff 
}

위 자바스크립트 코드에서 func_name 이라는 함수는 parm1, parm2 이렇게 두개의 매개변수를 가지고 있습니다.

React Component 에서 매개변수 역할을 하는 것이 바로 Props 라고 할 수 있겠습니다.

// ExampleComp.js
import React from 'react';

const ExampleComp = (props) => {
  return (
    <div>
      이름: {props.name}
      나이: {props.age}
    </div>
   );
}

export default ExampleComp;
// Main.js
import React from 'react';
import ExampleComp from 'react';
const MainComp = () => {
   return (
     <ExampleComp name="홍길동" age="17" />
   );
}

export default MainComp;

State

State는 React에서 동적 데이터를 처리할 때 사용하는 녀석입니다.
State는 State를 사용할 컴포넌트에서 만들어집니다.
State 값이 변경되면, 컴포넌트가 다시 랜더링 됩니다.

State 값이 변경되면, 컴포넌트가 다시 랜더링 되는 부분은 개발자에게 아주 큰 이점입니다.
개발자가 다시 랜더링을 하는 작업에 대해 고민할 필요가 없어집니다.
State 값만 변경하면 되니까요!

State를 어떻게 사용하나요?

아래 코드는 간단한 숫자 카운터를 State를 통해 구현합니다.

import React, {useState} from 'react';
const counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}번 클릭!</p>
      <button onClick={() => setCount(count + 1)}>
        클릭
      </button>
    </div>
  );
}

3번째 라인에서의 useState(0) 은 State 변수와 State를 설정하는 함수를 가져오게 해줍니다.
useState 함수에서 매개변수로 받는 0은 State 변수의 기본 값입니다.

다시 정리하자면 useState(기본 값) 은 State 변수와, 해당 State를 설정하는 함수를 가져옵니다.

setCount를 위 코드에서 호출을 하게되면 해당 함수는 State를 업데이트하고 다시 랜더링을 수행합니다.

🎉 마무리

오늘 Props와 State에 대해 알아보았습니다.
도움이 되셨기를 바라겠습니다 :)

개선할 점이나, 궁금한 점이 있으시면 언제든지 남겨주시면 확인 후 답변드리겠습니다!

다음 글도 좋은 글로 찾아오겠습니다 :)