2024. 5. 21. props, state.

import React from 'react'

function Child () {

 return <div>연결성공</div>

}

function Mother () {

return <Child/>

}

function GrandFather () {

  return <Mother/>

}

function App () {

  return <GrandFather/>

}

export default App

 

props

컴포넌트끼리의 정보 교환 방식

props 는 반드시 위에서 아래 방향으로 흐른다. 부모 = > 자식 방향으로만 흐른다. [단방향]

props 는 반드시 읽기 전용으로만 취급하며, 변경하지 않는다.

---

useState

 

React에서 상태(state)를 관리하기 위해 사용되는 훅

함수형 컴포넌트에서 상태를 사용할 수 있게 해주며,

상태의 초기값과 상태를 업데이트할 수 있는 함수를 반환함

useState를 사용하면 컴포넌트가 상태를 유지하고

상태가 변경될 때마다 컴포넌트가 다시 렌더링되도록 할 수 있음

 

 

 

function Counter() {

  // count는 현재 상태 값을 나타내고, setCount는 상태를 업데이트하는 함수입니다.

  const [count, setCount] = useState(0); // 0은 상태의 초기값입니다.

  return (

    <div>

      <p>현재 카운트: {count}</p>

      <button onClick={() => setCount(count + 1)}>증가</button>

      <button onClick={() => setCount(count - 1)}>감소</button>

    </div>

  );

}

 

 

const [count, setCount] = useState(0);

 useState는 배열을 반환, 첫 번째 요소는 현재 상태 값(count), 두 번째 요소는 상태를 업데이트하는 함수(setCount) useState의 인자로 전달된 값(여기서는 0)은 상태의 초기값이 됨

 

<p>현재 카운트: {count}</p>

상태 값은 count 변수에 저장되어 있으며, 이를 JSX 내부에서 사용할 수 있음.

 

 

<button onClick={() => setCount(count + 1)}>증가</button>

<button onClick={() => setCount(count - 1)}>감소</button>

버튼 클릭 시, setCount 함수를 호출하여 상태 값을 업데이트. setCount에 새로운 상태 값을 전달하면 React가 컴포넌트를 다시 렌더링