[React] 컴포넌트와 props

❓ 컴포넌트

리액트로 만든 페이지는 컴포넌트로 구성되어 있고, 함수형 컴포넌트이다.

component 를 번역하면 "요소" 라고 번역해 준다.

즉, 함수형 컴포넌트는 함수로 작성된 요소라고 할 수 있다.

 

이러한 컴포넌트들을 조립해서 페이지를 구성하는데,

이렇게 조립해서 사용하면 비슷한 부분들은 다른 페이지에서 코드를 재사용할 수도 있고 유지보수도 쉬워진다.

++) 모든 컴포넌트는 대문자로 시작한다.

 

 

❗ 컴포넌트 생성

컴포넌트를 생성할 때, 일반적으로 return 문에서 div 로 감싸주며, 빈 태그 <></> 로 감싸는 것도 가능하다.

그리고 컴포넌트를 외부에서 사용할 수 있도록 export default 를 이용해서 내보낸다.

이를 통해 다른 파일에서 import 하여 사용할 수 있다.

// Hello.jsx

const Hello = () => {
  return (
    <div>
      <p>Hello</p>
    </div>
  )
};
  
export default Hello;

 

++) div 태그로 감싸주는 이유?

리액트 컴포넌트는 하나의 엘리먼트를 반환해야 되기 때문이다.

즉, 반환되는 JSX 는 단일 엘리먼트로 감싸져 있어야 한다.

 

---

❓ props

위의 예시에서 App 컴포넌트가 부모 컴포넌트이고, Hello 와 Welcome 컴포넌트가 자식 컴포넌트라고 가정할 때,

자식 컴포넌트가 부모의 state 를 가져다가 쓰고 싶은 경우, props 를 이용한다.

 

리액트는 단방향 데이터 흐름을 가지므로, 반드시!! 부모 → 자식으로만 데이터를 전달할 수 있다.

 

❗ 방법

1. 직접 전달하는 방법

- 부모 컴포넌트에서 자식 컴포넌트에 전달할 데이터를 props 로 설정한다.

- 자식 컴포넌트에서 props 를 파라미터로 받아서 데이터를 사용한다.

// App.jsx

const App = () => {
  const message = "Hello World";
  
  return (
    <div>
      <Hello message={message} />;
    </div>
  )
};

// Hello.jsx

const Hello = (props) => {
  return (
    <div>
      <p>{props.message}</p>; // "Hello World" 전달 받음
    </div>
  )
};

export default Hello;

 

2. 구조 분해 할당으로 받아오는 방법

- 구조 분해 할당은 객체나 배열에서 필요한 값을 직접 추출하여 변수에 할당하는 방법이다.

- props 가 객체 형태로 전달되기 때문에 { message } 형태로 접근 가능하다.

// Hello.jsx

const Hello = ({ message }) => {
  return (
    <div>
      <p>{message}</p>
    </div>
  );
};

export default Hello;

 

---

📝 정리

1. 리액트 컴포넌트는 함수형으로 작성되며, 재사용성과 유지보수를 용이하게 한다.

2. 컴포넌트 생성 시, 일반적으로 div 태그나 빈 태그로 감싸주며, export default 로 내보내 다른 파일에서 사용할 수 있다.

3. props 는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하며, 구조 분해 할당을 통해 더 간편하게 사용할 수 있다.

 

---

💡 참고 자료

https://ko.legacy.reactjs.org/docs/components-and-props.html

Components와 Props – React

https://www.youtube.com/watch?v=0AinoaApDjc&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=4

https://ko.react.dev/learn/passing-props-to-a-component

컴포넌트에 props 전달하기 – React

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN