React의 컴포넌트와 props

binary·2022년 1월 18일
0
post-thumbnail

컴포넌트가 뭐지?

리액트에서의 컴포넌트는 앱을 이루는 최소한의 단위이다.

웹 사이트를 보면 반복된 요소들이 굉장히 많은 것을 알 수 있다.

| Google

이러한 것들을 컴포넌트화 한다면, 상황에 따라 컨텐츠만 다르게 넘기면서 일관적인 UI를 보여줄 수 있을 것이다.

이제는 컴포넌트 기반으로 개발하는 것이 너무나도 당연해졌다.
리액트 개발을 한다는 것은 컴포넌트를 개발하는 것과 동일하다고 말할 수 있을 정도이다.

자바스크립트 코드를 리액트의 컴포넌트로 바꾸기

컴포넌트는 자바스크립트의 함수와 유사하다.

const mainTitle = <h1>내가 좋아하는 과일</h1>;

const main = (
  <div class='main'>
    <img src='https://src.hidoc.co.kr/image/lib/2021/9/17/1631863503853_0.jpg' alt='사과 1개' />
    <button>🤍</button>
  </div>
);

const likeTitle = <h1>❤️</h1>;

const like = <ul class='like'></ul>;

const app = (
  <div>
    {mainTitle}
    {main}
    {likeTitle}
    {like}
  </div>
);

const 여기다가그려 = document.querySelector("#app");

ReactDOM.render(app, 여기다가그려);

이렇게 작성된 자바스크립트 코드를 리액트의 컴포넌트로 바꾸려면 어떻게 해야 할까?

먼저, main 부터 바꾸어 볼까?!

<script type="text/babel">
  
const Main = () => {
  return(
    <div class='main'>
      <img src='https://src.hidoc.co.kr/image/lib/2021/9/17/1631863503853_0.jpg' alt='사과 1개' />
      <button>🤍</button>
    </div>
  );
};
  
</script>

어떤 것이 바뀌었나 보자면,
1. main에서 Main 으로 변수명의 첫글자가 대문자로 바뀜.
2. 함수처럼 변했다? return 값에 태그들이 들어갔다.

컴포넌트의 이름은 꼭 첫글자가 대문자여야 한다.
소문자로 시작할 경우 리액트는 DOM 태그로 처리한다.

const MainTitle = () => {
  return <h1>내가 좋아하는 과일</h1>;
};

const Main = () => {
  return(
    <div class='main'>
      <img src='https://src.hidoc.co.kr/image/lib/2021/9/17/1631863503853_0.jpg' alt='사과 1개' />
      <button>🤍</button>
    </div>
  );
};

const LikeTitle = () => {
  return <h1>❤️</h1>;
};

const Like = () => {
  return <ul class='like'></ul>;
};

이렇게 전부 컴포넌트로 바꾸었다!

컴포넌트 사용하기

const MainTitle = () => {
  return <h1>내가 좋아하는 과일</h1>;
};

const Main = () => {
  return(
    <div class='main'>
      <img src='https://src.hidoc.co.kr/image/lib/2021/9/17/1631863503853_0.jpg' alt='사과 1개' />
      <button>🤍</button>
    </div>
  );
};

const LikeTitle = () => {
  return <h1>❤️</h1>;
};

const Like = () => {
  return <ul class='like'></ul>;
};

const app = (
  <div>
    <MainTitle />
    <Main />
    <LikeTitle />
    <Like />
  </div>
);

const 여기다가그려 = document.querySelector("#app");

ReactDOM.render(app, 여기다가그려);

<Main /> 이렇게 태그처럼 컴포넌트를 사용할 수 있다.

props가 뭐지?

일단, 고양이에게 인사를 하는Welcome 컴포넌트를 만들어 보았다.

function Welcome() {
  return <h1>Hello, cat!</h1>;
}

const app = (
  <div>
    <Welcome />
  </div>
);

const 여기다가그려 = document.querySelector("#app");

ReactDOM.render(app, 여기다가그려);

| 실행화면

그런데 갑자기 강아지에게 인사를 하고 싶어진다면, 수많은 컴포넌트 중 Welcome 컴포넌트를 찾아 cat을 지우고 dog라고 고쳐야 한다.
꽤 귀찮은 일이다... 이럴 때! props를 사용하는 것이다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const app = (
  <div>
    <Welcome name="dog" />
    <Welcome name="cat" />
  </div>
);

const 여기다가그려 = document.querySelector("#app");

ReactDOM.render(app, 여기다가그려);

| 실행화면

이렇게 props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값으로, 어떤 값을 컴포넌트에게 전달할 때 사용한다.

이때 컴포넌트의 자체 props를 수정해서는 안 된다!
(props.name = 1; 이딴 거 안 된다는 뜻)

props가 어떻게 넘어오나?

props를 통해 부모 컴포넌트에서 자식 컴포넌트로 어떻게 넘어오는 지 알아보려고 console.log(props); 해보았다.

Object로 넘어와서 name을 선택한 거였구나!

그러면, props.name 으로 굳이 하지 않고 객체를 풀어서 {name} 으로 쓸 수 있을 것 같다.

function Welcome({ name }) {
  return <h1>Hello, { name }</h1>;
}

const app = (
  <div>
    <Welcome name="dog" />
    <Welcome name="cat" />
  </div>
);

const 여기다가그려 = document.querySelector("#app");

ReactDOM.render(app, 여기다가그려);

| 실행화면

props.name 으로 했을 때와 동일하게 동작하는 것을 알 수 있다.


만들면서 배우는 리액트: 기초
위 강의를 참고하여 정리했습니다!

0개의 댓글