props와 state

다른 개발 언어와 다르게 리액트에서는 컴포넌트를 통해
props 인자와 state를 활용하여 데이터를 받아오고 수정을 한다는데 어떻게 활용하는지 더 자세하게 알아보도록 하자✏️

props

먼저 props는 property(프로퍼티)의 약자로 자식이 부모에게 받아온 데이터로써 컴포넌트 외부에서 전달받은 값을 뜻한다.

props로 전달받는 방법 1 : 객체 형태

1. {name: '아메리카노', price: '3000'} 형태로 부모(상위) 컴포넌트가 전달하고 자식(하위) 컴포넌트는 객체 형태로 받게되는 방법이다.

{/* 부모(상위) 컴포넌트 */}
function App() { 
  return (
    <>
      <CafeBox name="아메리카노" price="3000"/>
      <CafeBox name="자바칩 프라푸치노" price="5500"/>
      <CafeBox name="헤이즐넛 아메리카노" price="4000"/>
      <CafeBox name="딸기라떼" price="5000"/>
    </>
  );
}

⬇️

{/* 자식(하위) 컴포넌트 1 : props를 객체 형태로 받음 */}
const CafeBox = (props) => { 
    return (
      <div className="menu-item">
        <h3>{props.name}</h3>
        <p>{props.price}</p>
      </div>
    )
  }

props로 전달받는 방법 2 : 비구조화 할당

2. 비구조화 할당 형식인 객체 안에 있는 속성만 꺼내서 각각의 변수에 저장하는 자바스크립트 문법으로 부모(상위) 컴포넌트에서 자식(하위) 컴포넌트에 값을 전달할 때는 데이터를 받은 자식 컴포넌트가 중괄호 { } 를 통해 받아서 사용한다.

{/* 부모(상위) 컴포넌트 */}
function App() { 
  return (
    <>
      <CafeBox name="아메리카노" price="3000"/>
      <CafeBox name="자바칩 프라푸치노" price="5500"/>
      <CafeBox name="헤이즐넛 아메리카노" price="4000"/>
      <CafeBox name="딸기라떼" price="5000"/>
    </>
  );
}

{/* 자식(하위) 컴포넌트 2 : 비구조화 할당 */}
const CafeBox = ({name, price}) => { 
    return (
      <div className="menu-item">
        <h3>{name}</h3>
        <p>{price}</p>
      </div>
    )
  }

state

state는 컴포넌트 내부에서 사용하고 변경이 가능한 데이터이다.

여기서 일반 변수도 데이터를 변경하는데 React의 state와 다른 점은 뭘까?🧐

일반 변수는 값이 변화해도 화면에 보여지지 않는다.
하지만 state는 컴포넌트에서 변화를 감지한 후 화면에 변경된 값을 보여주는 특성이 있다.
(자동으로 Rendering됨)
또한, state는 setState()라는 함수를 이용한다는 차이점이 있다.

state는 컴포넌트에서 사용하기 위해 state 생성해줘야한다.

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

state : 변수이름
setState : state를 변경하는 함수
useState(초기값) : 컴포넌트 내부에서 사용할 데이터

useState는 state를 생성/변경을 처리하는 React Hooks 중 하나로 함수형 컴포넌트에서만 사용해야하며, 배열로 전달해준다.

여기서 state를 생성해줄때 다른 것도 아니고 const로 정의한 이유는
재할당을 막고 useState를 사용한 변수 변경만 허락하기 위해 const로 선언해주어야한다.

이렇게 props와 state를 핵심 딱딱! 누구보다 간략하게!! 정리해봤는데 글로만 봐서는 이해가 안될 수도 있다...🫢

다음 게시물에서는 props와 state를 활용하여 어떻게 데이터를 전달하고 받는지 예습을 통해 알아가보도록 하장!! 😚✌️