React) 리액트 컴포넌트와 Props

1. React 컴포넌트란?

React 컴포넌트는 UI를 나타내는 독립적이고 재사용이 가능한 모듈이다.

컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지 타입이 있다.

React 공식 메뉴얼에는 함수형 컴포넌트 사용을 권장하기 때문데 이 글에서는 함수형 컴포넌트를 다루겠다.

 

2. 함수형 컴포넌트

함수형 컴포넌트는 React에서 UI를 정의하기 위해 사용되는 함수이다.

React 공식 문서에서 최신 버전의 React에서는 함수형 컴포넌트 사용을 권장한다.

 

함수형 컴포넌트의 장점

함수형 컴포넌트의 장점은 간결하게 작성이 가능하며 코드의 가독성이 뛰어나고, Hook을 이용해 state와 라이프 사이클을 제어할 수 있는 등 클래스 컴포넌트 처럼 동작할 수 있는 점이다.

 

또한 컴포넌트에서 다른 컴포넌트로 불러오거나 내보내는 작업도 클래스 타입에 비해 쉬운 편이다.

예시

import React from 'react';

const TestComponent = (props) => {
  return <div>{props.age}</div>;
}

export default TestComponent; //다른 JS파일에서 불러올 수 있도록 내보내주기

위의 코드에서 컴포넌트를 만들어 봤다.

컴포넌트의 이름은 항상 대문자로 시작해야하며 예약어와 같은 키워드는 사용할 수 없다.

또한 컴포넌트 내부에는 JSX를 이용해 마크업을 작성할 수 있으며 이는 브라우저의 UI를 만들게 된다.
JSX 작성에 대한 정보는 이전에 정리한 이 글을 참고하자.

컴포넌트 모듈은 불러오기와 내보내기가 가능하며 각각 import와 export를 이용해 동작할 수 있다.

 

 

3. Props

React 컴포넌트는 props를 사용해 서로 통신을 합니다.

모든 부모 컴포넌트는 props를 자식 컴포넌트에 전달함으로 특정 정보를 전달할 수 있습니다.

function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/1bX5QH6.jpg"
      alt="Lin Lanying"
      width={100}
      height={100}
    />
  );
}

export default function Profile() {
  return (
    <Avatar />
  );
}

위의 코드에서 img에 src, className, alt, width, height는 img 태그에 전달해야하는 props 중 일부이다.

 

그렇다면 만들어낸 컴포넌트에 props를 전달하는 방법에 대해 알아보자

 

3.1 Component에 props 전달하기

export default function Profile() {
  return (
    <Avatar />
  );
}

이 코드의 Avartar 컴포넌트에는 props가 전달되지 않는다.

 

props를 전달하려면 두 단계를 거쳐야한다.

1. props를 자식 컴포넌트에 전달
2. 자식 컴포넌트 내부에서 props 읽기

3.1.1 props를 자식 컴포넌트에 전달

부모 컴포넌트에서 전달하고자 하는 props를 자식 컴포넌트로 전달한다.

예시에서는 name과 imageId(객체), size(숫자)를 전달했다.

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

이중 중괄호는 JSX 내부의 객체일 뿐이다.

 

 

3.1.2  자식 컴포넌트 내부에서 props 읽기

이제 Profile 컴포넌트에 전달된 props를 읽어보자

전달된 props는 객체 형태로 구성된 person(name과 imageId), 그리고 숫자로 전달된 size이다.

 

각 props는 , 쉼표로 구분된 이름을 ({ 와 }) 바로 뒤에 나열해 이러한 props를 읽을 수 있다.

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

이렇게 전달받은 Props는 위와 같이 부모 컴포넌트에서 자식 컴포넌트의 크기나 보여질 데이터를 정할 수 있습니다.

또한 자식 컴포넌트는 부모 컴포넌트에서 받은 props를 사용하는 방법을 자체적으로 정할 수 있습니다.

이는 props를 지정하고 사용하는 것은 자식, 부모 컴포넌트간 독립되어 정할 수 있다는 것을 알립니다.

 

props를 전달할 때 여러개를 나열해 넘길 필요없이 한번에 넘길 수 있다.

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

이 두 코드의 차이점은 props를 나열해 보내고 props를 하나의 객체로 보낸뒤 펼침연산자로 보낸 차이다.

 

물론 자식 컴포넌트에서 읽을 때도 다르다.

비구조화 할당을 이용하자

function Avatar(props) {
  let { person, size } = props;
  // ...
}

// 함수의 파라미터에서도 사용할 수 있다.
function Avatar({ person, size }) {
  let { person, size } = props;
  // ...
}

 

 

3.1.3 JSX를 자식으로 전달

props는 다른 컴포넌트도 전달할 수 있다.

그리고 props로 전달된 컴포넌트는 받은 컴포넌트의 children으로 사용할 수 있다.

 

JSX 태그 내에 콘텐츠를 중첩하면 상위 구성 요소는 children 이라는 prop에서 해당 콘텐츠를 받는다.

import Avatar from './Avatar.js';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

위의 코드같이 props로 전달된 JSX 혹은 컴포넌트를 children으로 사용할 수 있다.

이 패턴은 여러 곳에서 사용하며, 이는 부모 컴포넌트의 props에 의해 채워지는 구멍이 있다고 생각하면 된다.

 

 

3.2 Props 기본값 정하기

Props의 기본값의 설정하는 법은 간단하다.

컴포넌트를 만들 때 = 으로 값을 설정해주면 해당 요소는 기본 값이 설정된다.

function Avatar({ person, size = 100 }) {
  // ...
}

위의 컴포넌트에서 size = 100 이라는 코드로 이 컴포넌트를 사용할 때 prop의 size = {undefined}일 때 size는 100이 된다. 즉, size로 아무런 값이 전달 되지 않았거나 undefined가 전달됬을 때 기본값이 적용된다.

하지만, size = {0} 혹은 size = {null} 일 때는 기본값이 적용되지 않는다.

 

3.3 Props 사용시 주의 점

주의할 점은 Props는 읽기전용으로 유지되어야 합니다.

이는 아래에 나올 props의 불변성 유지와 불필요한 리렌더링을 막기 위함이다.

 

또한 Props는 불변함을 유지해야 합니다.
불변성을 유지해야 하는 이유는 아래와 같다

1. 효율적인 갱신 검사를 위해 :
   불변성을 유지하지 않으면 매번 새로운 객체가 생성되기에 React는 각 업데이트에서 모든 하위 컴포넌트에 대한 렌더링을 해야한다. 이는 성능 저하로 이어진다.
   
2. 순수 함수의 이점 :
   불변성을 지키며 순수함수로 유지하게 되면 부작용과 디버깅 및 테스트가 용이해진다.
   
   
3. 컴포넌트 간의 예측 가능성 : 
   컴포넌트의 목적과 의도가 props로 인해 명확해지며 props가 변경되지 않으면 동일한 방식으로 동작하게 된다.
   
   
4. React의 재조정 최적화 : 
   React.memo를 사용해 컴포넌트 리렌더링의 필요여부를 결정할 때, 불변성을 유지해 불필요한 리렌더링을 방지.

부모 컴포넌트에서 자식 컴포넌트로 전달되는 props는 변경해서는 안된다. 
즉, 불변 상태를 유지 해야한다.

혹여 변경을 할때는 부모 컴포넌트에 새로운 props 전달을 "요청" 해야한다.

 

 

 

4. 참고 링크

• https://react.dev/learn/passing-props-to-a-component
• https://react.dev/learn/your-first-component
• https://react.dev/learn/keeping-components-pure
• https://goddaehee.tistory.com/300?category=395445
• https://kit-developer.tistory.com/44#%F-%-F%--%AE%--%EB%A-%AC%EC%--%A-%ED%-A%B-%EC%--%--%EC%--%-C%--%EC%--%-D%EC%--%B-%EC%-D%--%--%EB%B-%--%EB%B-%--%--%EA%B-%-D%EC%B-%B-%EB%A-%-C%--%EB%-B%A-%EB%A-%A-%EB%-A%--%--%EC%-D%B-%EC%-C%A-%EB%-A%--%--%EB%AC%B-%EC%--%--%EC%-D%BC%EA%B-%-C%EC%-A%--%-F%--%EB%--%--%-C%--%EB%B-%--%EB%B-%--%--%EA%B-%-D%EC%B-%B-%EB%A-%-C%--%EB%-B%A-%EB%A-%A-%EC%A-%--%--%EC%--%-A%EC%--%--%EC%-D%--%--%EB%--%-C%--%EB%B-%-C%EC%--%-D%ED%--%A-%--%EC%--%--%--%EC%-E%--%EB%-A%--%--%EC%-D%B-%EC%-A%--%EB%-A%--%--%EB%AC%B-%EC%--%--%EC%-D%BC%EA%B-%-C%EC%-A%--%-F