22.03.09 수

오늘은 리액트에 대해서 공부를 진행했습니다.

그리고 그 중에서 구조분해문법(Destructuring)에 대해 좀 더 자세히 파보았습니다.

저는 이것을 참고해서 리액트 컴포넌트를 구조분해문법으로 작성해보았습니다.

 

기존에는 props를 활용해 이렇게 작성했었습니다.

const MainCard = (props) => {
      function handleHeartClick() {
        console.log("하트 눌렀음");
      }
      function handleHeartMouseOver() {
        console.log("하트 스쳐 지나감");
      }
      return (
        <div className="main-card">
          <img src={props.img} alt="고양이" width="400" />
          <button
            onClick={handleHeartClick}
            onMouseOver={handleHeartMouseOver}
          >
            🤍
          </button>
        </div>
      );
    };
    
    const app = (
        <div>
          <Title> 1번째 고양이 가라사사대 </Title>
          <Form />
          <MainCard
            img="https://cataas.com/cat/60b73094e04e18001194a309/says/react"
          />
          <Favorites />
        </div>
      );

 

이제 구조분해문법으로 작성해보겠습니다.

const MainCard = ({ img }) => {
        function handleHeartClick() {
          console.log("하트 눌렀음");
        }
        function handleHeartMouseOver() {
          console.log("하트 스쳐 지나감");
        }
        return (
          <div className="main-card">
            <img src={img} alt="고양이" width="400"} />
            <button
              onClick={handleHeartClick}
              onMouseOver={handleHeartMouseOver}
            >
              🤍
            </button>
          </div>
        );
      };
      
const app = (
        <div>
          <Title> 1번째 고양이 가라사사대 </Title>
          <Form />
          <MainCard
            img="https://cataas.com/cat/60b73094e04e18001194a309/says/react"
            alt="고양이"
            width="400"
          />
          <Favorites />
        </div>
      );

 

이 과정에서 맨 처음 참고한 코드를 보면 var { language, position, area, hobby, age} = josh;와 같은 코드가 있어서 구조분해문법이 실행하는 것을 확인할 수 있습니다.

그런데 구조분해문법을 활용한 코드에는 var처럼 선언한 적이 없습니다.

 

이를 의아해서 선생님께 물어본 결과 이런 답장을 주셨습니다.

[const MainCard 등으로 만든 리액트 컴포넌트는 자동으로 함수 첫번째 인자로 props가 넘어오기 때문입니다.]

 

console.log(props)를 찍은 결과

{img: 주소} 가 나오는 것을 확인했고 선생님의 말씀을 이해했습니다. 그리고 제 나름대로 좀 더 알아보았습니다.

두번째 인자를 이처럼 넘길 수 없을까 싶은 생각에 다음과 같이 진행해보았습니다.

const app = (

        <div>

          <Title> 1번째 고양이 가라사사대 </Title>

          <Form />

          <MainCard

            img="https://cataas.com/cat/60b73094e04e18001194a309/says/react"

            alt="이건 고양이 사진입니다."

          />

          <Favorites />

        </div>

      );

 

기존에는 인자 하나만 있어 {img}가 가능했지만 alt를 추가해보았습니다.

이때 console.log(props)를 했을 때 {img: 주소, alt: "이건 고양이입니다"}가 나왔습니다.

그리고 나서 const MainCard에 {img} 대신 {alt}를 넣고 다시 실행해보았습니다.

그 결과 잘 나오는 것을 확인할 수 있었습니다. 혹시나 싶어 이번에는 props에 width 값 400도 추가하여 해보았습니다. 그러면 이제 props에는 img, alt, width의 값을 갖고 있게 됩니다.

이 상태에서 MainCard의 변수로 {width}를 준 결과 잘 실행되는 것을 확인했습니다.

이를 통해서 리액트 컴포넌트에서 디스트럭처링 문법을 사용할 수 있으며 var를 선언하는 곳이 const MainCard = ( ) => {} 에서 괄호임을 알 수 있었습니다.

여기서 한 발 더 생각해보았습니다. img 하나만 쓰려는 것이 아니라 alt, width도 같이 쓰고 싶다면 괄호 안에서 다른 것들도 같이 선언하면 어떨까? 하고 말이죠

props가 {img : 주소 , alt: "고양이",  width: 400}를 가지고 있을 때 MainCard를 이렇게 작성해보았습니다.

const MainCard = ({ img, alt, width }) => {

        function handleHeartClick() {

          console.log("하트 눌렀음");

        }

        function handleHeartMouseOver() {

          console.log("하트 스쳐 지나감");

        }

        return (

          <div className="main-card">

            <img src={img} alt={alt} width={width} />

            <button

              onClick={handleHeartClick}

              onMouseOver={handleHeartMouseOver}

            >

              🤍

            </button>

          </div>

        );

      };

 

그 결과 다음과 같습니다.

그럼 정리해보겠습니다.

1. 구조 분해 문법(Destructuring)에서 var선언은 리액트 컴포넌트에서 ( ) 가 담당한다.

2. props의 여러 key값을 쓰고 싶으면 ( ) 안에 여러개를 선언하면 된다

 

이런 결론을 내릴 수 있었습니다.

 

이번 공부는 정말로 뿌듯한 공부였던 것 같습니다. 제 호기심에서 시작하여 끝을 낼 수 있었기 때문인 것 같습니다.

이게 공부에서 찾을 수 있는 즐거움이 아닐까 싶네요 ㅎㅎ

앞으로도 이렇게 공부할 수 있도록 노력해보겠습니다.