👀 컴포넌트 구성하기 #2

컴포넌트 구성하기 #1

지난 포스팅에 이어서 만든 컴포넌트를 더욱 편리하게 사용하기 위한 방법을 알아보자.  다시 한번 언급하는 것이지만 React는 재사용성을 높이는 것에 목표가 있다. 그렇기 때문에 재사용성을 높이는 방법에 대해 알아보도록 하겠다.

 

컴포넌트 분리하기

 

이전에 만든 컴포넌트는 하나의 .jsx 파일에서 2개의 function를 작성하였다. 하지만 아래와 사진과 같이  공식 문서에 따르면 한 가지에 기능에 귀속된 것이 아닌 다양한 방면으로 사용할 수 있는 컴포넌트는 별도로 작성하는 것을 권하고 있다.

컴포넌트 분리

 

 

위의 예시를 코드로 들어보겠다.

아래는 root 컴포넌트에 작성된 컴포넌트이다.  

//App.js

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

위와 같은 1개의 파일에 작성하는 것이 아닌 역할을 나눠 작성해야 한다.

 

아래와 같이 2개의 파일로 나눠 작성하여 코드에 대한 응집도는 높여주며, 결합도는 낮추는 설계를 한다.

// App.js

import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

// Gallery.js

function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

 

 

컴포넌트를 분리하여 다른 컴포넌트에서 사용하기 위한 방법으로는 export 하여 import 하는 것이다. 아래의 사진과 같이 먼저 컴포넌트에서 외부에서 사용할 수 있도록 export 접두사를 붙여 작성한다. 다음으로는 먼저 만든 컴포넌트를 사용할 컴포넌트 내부에서 import를 사용하여 미리 만들어둔 컴포넌트를 사용한다.

export와 import

 

 

Attribute에 변수 사용하기

React는 Attribute에 변수를 사용할 수 있다. 이 방법을 사용하면 좀 더 범용적인 컴포넌트를 작성하는데 도움을 준다. Attribute에 변수를 사용하는 방법은 중괄호({ })를 사용하는 것이다. 아래의 간단한 예를 들어보겠다.

 

// 기존의 방법
function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

// 중괄호를 사용한 Attribute 수정 방법
function Profile() {
    const srcPath =  "https://i.imgur.com/MK3eW3As.jpg";
    const name =  "Katherine Johnson";
  	
    return ( <img src={srcPath} alt={name} />);
}

 

위와 같이 중괄호를 사용하면 변수를 사용할 수 있다. 근데 해당 코드의 경우 변수 사용은 가능하나 외부에서 전달받는 파라미터가 없다. 

 

 

컴포넌트에 Props 전달하기

컴포넌트는 서로 통신하기 위하여 Props를 사용합니다.  props이라고 하면 '이건 뭐지?'라고 생각할 수 있다.  props은 간단하게 태그에 전달되는 Attribute라고 생각하면 된다. 아래의 코드를 보면 기존에 attribute를 설정하는 방법과 동일하게 props를 전달한다.

props 전달 방법

 

전달된 props를 사용하는 방법에 대한 설명 해보도록 하겠다. 먼저 props를 전달하는 예시 코드를 작성하여 예를 들어보겠다. 아래의 코드와 같이 Profile 컴포넌트에 img와 name이라는 props를 전달한 것을 볼 수 있다.

function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile img={"imagePath_1"} name={"name_1"} />
      <Profile img={"imagePath_2"} name={"name_2"}/>
      <Profile img={"imagePath_3"} name={"name_3"}/>
    </section>
  );
}

 

Profile에 전달된 props를 사용하는 방법은 크게 두 가지로 나뉘다. 먼저 Profile의 파라미터를 받는 곳에 ({ ... , ...}) 와 같이 부모가 전달해 준 props의 이름을 명시하여 사용한다. 이와 같이 사용한다면 코드 내에서 변수를 사용하는 것처럼 사용이 가능하다.

function Profile({img,name}) {
  return (
    <img
      src={img}
      alt={name}
    />
  );
}

 

다음으로는 아래와 코드와 같이 props로 전달받아 내부에서 props를 나눠 사용하는 방법이다. 이와 같은 방법이 가능한 이유는 컴포넌트에 대한 유일한 인자이며, props는 곧 객체이기 때문이다.

function Profile(props) {
  const {img,name}  = props;
  return (
    <img
      src={img}
      alt={name}
    />
  );
}

 

 

자식 컴포넌트 값을 Props로 전달받기

개발을 진행하다 보면 태그를 중첩하여 사용하는 경우가 대부분이기 때문에 컴포넌트를 사용하다 보면 현재 컴포넌트에 자식으로 있는 컴포넌트에 자체를 변수로 전달받고 싶을 때가 있다. 아래는 중첩코드의 예시이다.

<div>
	<span> 자식 입니다..</span>
</div>

 

위의 중첩 코드를 컴포넌트라고 생각하고 변경해 보자

<Parent>
	<Child />
</Parent>

 

위와 같은 컴포넌트 구성일 때 Parent 컴포넌트에서 자식 컴포넌트의 값을 변수로 전달받고 싶을 때는 Props 내부의 children이라는 prop를 활용한다.

function Parent(props){
	const children = props.children
	return(
    	<div>
        	{children}
        </div>
    )
}