컴포넌트와 Props

안녕하세요! YB 김채은입니다~

 

우선 저는... 리액트라는 것을 이번에 처음!! 사용해봤는데요...ㅎㅎ

그래서 며칠째 그냥 몰름보반장 상태였습니다

 

그리고 드디어 Component와 Props에 대해 배웠습니다...

그래서 일단 이 내용을 제가 이해한 대로 한 번 정리해보려 합니다😎

이미 대부분 다 아는 내용이겠지만!! 저는 몰랐어요 ~..~

 

1. 컴포넌트(Component)란?

컴포넌트는 리액트에서 UI를 구성하는 하나의 작은 조각이라고 생각하면 됩니다.

웹페이지를 만들 때 다양한 요소들(버튼, 텍스트 박스, 사용자 프로필 등)을 사용하는데, 리액트에서는 각 요소들을 컴포넌트로 만들어 재사용할 수 있어요. 

 

컴포넌트는 1. 화면에 무엇을 보여줄지를 결정하고 2. 다른 컴포넌트들과 함께 UI를 구성합니다!

 

예를 들어, "안녕~!!"이라는 인사말을 보여주는 간단한 컴포넌트를 만들어 보겠습니다.

function Hello() {
  return <h1>안녕~!!</h1>;
}

 

여기서 Hello라는 컴포넌트는 "안녕~!!"이라는 텍스트를 화면에 표시하는 역할을 하고, 이 컴포넌트는 다른 곳에서도 재사용할 수 있어요.

 

여러 개의 컴포넌트들을 모아서 하나의 화면을 구성할 수도 있습니다.

function App() {
  return (
    <div>
      <Hello />
      <p>컴포넌트를 배워보자!</p>
    </div>
  );
}

여기서 App 컴포넌트는 Hello 컴포넌트와 추가적인 텍스트를 보여주게 됩니다.

 

2. Props란?

props는 "properties"의 줄임말로, 컴포넌트에 전달되는 데이터로서 컴포넌트를 맞춤형으로 만들어줍니다.

 

예를 들어, 여러 사람에게 보내는 인사말을 만들어 보겠습니다.

function Hello(props) {
	return <h1>안녕~!!, {props.name}!</h1>;
}

여기서 props.name은 전달받은 이름이 표시되는 부분입니다. props는 컴포넌트에 전달할 데이터들의 모음집이라고 생각하면 됩니다.

 

이제 Hello 컴포넌트를 사용할 때, name이라는 값을 넣어서 여러 사람의 이름을 표시할 수 있습니다.

function App() {
  return (
    <div>
      <Hello name="채은" />
      <Hello name="채연" />
      <Hello name="채현" />
    </div>
  );
}

여기서 App 컴포넌트는 Hello 컴포넌트를 name 값을 각각 다르게 해서 세 번 사용했어요.

그 결과로 화면에는 

"안녕~!!, 채은!", " 안녕~!!, 채연! ", " 안녕~!!, 채현! "이 출력되겠죠?

 

3. Props는 읽기 전용!

리액트에서 props는 읽기 전용이라는 규칙이 있습니다. 즉, 컴포넌트 안에서 props를 변경할 수 없어요!

위의 코드를 예로 들면 Hello 컴포넌트가 받은 name의 값을 변경할 수 없다는 것입니다.

 

4. 컴포넌트 합성

한 컴포넌트는 다른 컴포넌트를 포함할 수 있습니다. 여러 개의 작은 컴포넌트들을 합쳐서 더 큰 컴포넌트를 만들 수 있는 것이죠. 이 방법으로 복잡한 UI를 간단하게 만들 수 있습니다.

 

예를 들어, 사용자 이름과 프로필 이미지를 보여주는 컴포넌트를 만들어 볼게요. 먼저 사용자 이름을 보여주는 UserName 컴포넌트와, 프로필 사진을 보여주는 UserProfile 컴포넌트를 만들어 볼게요.

function UserName(props) {
  return <h2>{props.name}</h2>;
}

function UserProfile(props) {
  return <img src={props.profileUrl} alt={`${props.name}의 프로필 사진`} />;
}

 

이제 userCard라는 새로운 컴포넌트를 만들어서 위의 두 컴포넌트를 합쳐보겠습니다.

function UserCard(props) {
  return (
    <div>
      <UserProfile profileUrl={props.profileUrl} name={props.name} />
      <UserName name={props.name} />
    </div>
  );
}

여기서 UserCard 컴포넌트는 UserProfile과 UserName 컴포넌트를 하나로 묶어서 보여주는 역할을 합니다.

 

5. 사용 예시

마지막으로, UserCard 컴포넌트를 사용해서 사용자의 프로필을 화면에 표현해 보겠습니다.

function App() {
  return (
    <UserCard
      name="김채은"
      profileUrl="https://abcdefg.com/card.jpg"
    />
  );
}

요런식으로 표현할 수 있겠습니다.!!

 

아직 배워야 할 것들이 산더미지만..

하나씩 배우면서 3주차 과제를 마무리해보겠습니다...!!!!!!!💪💪

(씨박스 과제도....)