리액트 핵심만 훑어보자 #5 컴포넌트

 

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.

 

컴포넌트(Component)에 대해 알아보자

• JSX, 엘리먼트를 공부하면서 컴포넌트라는 용어를 확인할 수 있었을 것이다.
• 실습을 통해 컴포넌트를 개발하기도 했다.
  
  
• 컴포넌트는 props를 통해 속성을 입력하여 리액트 엘리먼트를 출력하는 자바스크립트 함수이다.
• 조금 더 쉽게 설명하자면 애플리케이션을 구성하는 재사용 가능한 부품이라고 할 수 있다.
• 또한 하나의 컴포넌트를 여러 개의 컴포넌트로 구성할 수도 있다.
  
  
• 컴포넌트 재사용의 이점은 다들 아시다시피 코드의 가독성을 확보할 수 있고, 코드 양을 줄임으로써 개발 및 유지 보수 시간을 절감할 수 있다.
  
  

props 어디서 많이 본 것 같은데...

• 저번 포스팅에서 엘리먼트를 설명할 때 부모 컴포넌트에서 하위 컴포넌트로 전달되는 객체라고 하였다.
  
  
• 더 쉽게 설명하자면, 컴포넌트는 붕어빵 틀이고 props는 반죽 또는 앙금이다.
• 가령 같은 형식으로 속성만 다른 리액트 엘리먼트를 추가하고 싶다면 동일 컴포넌트를 재사용하여 속성만 다르게 주입해 주면 된다.
  
  
• props의 중요한 특징 중 하나는 읽기 전용이라는 것이다. 이는 값을 수정할 수 없다는 말과 동일하다.
• 엘리먼트를 생성하는 도중에 props가 바뀌어 버리면 리액트가 제대로 동작하지 못하기 때문에 읽기 전용이라는 특징을 띠게 되는 것이다.
  
  
• 같은 props에 대해서는 항상 같은 결과를 보여주어야 한다. 이러한 리액트 컴포넌트를 pure 하다고 한다.
  
  
• 만약 다른 props를 가진 리액트 엘리먼트를 렌더링 하고 싶으면 새로운 값을 컴포넌트에 전달하면 된다.
• 이 과정에서 리액트 엘리먼트가 렌더링 된다.

 

예제 코드를 살펴보자

function App(props) {
	return (
    	<Profile
        	name="brobro332"
            introduction="안녕하세요!"
            viewCount={20}
        />
    );
}

• 상기 예제에서는 Profile 컴포넌트에 name, introduction, viewCount 속성을 전달하여 리액트 엘리먼트를 생성한다.
• 참고로 문자열 이외의 정수, 변수, 컴포넌트 등을 사용할 경우 중괄호로 감싸주어야 한다.
• 문자열도 중괄호로 감싸도 상관없다. 중괄호를 사용하면 자바스크립트 코드를 사용하는 것과 같다.

 

컴포넌트에도 종류가 있다

1. 클래스 컴포넌트
2. 함수 컴포넌트

class Welcome extends React.Component {
    render() {
        return <h1>안녕, {this.name}</h1>;
    }
}

• 클래스 컴포넌트는 자바스크립트 ES6의 클래스를 사용해서 만들어진 형태이다.
• 리액트의 모든 클래스 컴포넌트는 React.Component를 상속받아서 만든다.

 

• 함수 컴포넌트는 리액트 컴포넌트를 일종의 pure 함수로 생각하는 것이다.
• 초기 버전에는 클래스 컴포넌트를 주로 사용하였으나 불편하다는 의견이 다수였고, 이후에는 함수 컴포넌트를 개선해서 주로 사용하게 되었다.
• 개선하는 과정에서 훅이라는 것이 개발되었는데 리액트의 주력 기능이기 때문에 앞으로는 주로 함수 컴포넌트를 사용하게 될 것이다.
  
  

컴포넌트 네이밍 컨벤션

컴포넌트 이름은 항상 대문자로 시작해야 한다.

• 리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 인식하기 때문이다.
• 예를 들어 <div>는 내장 컴포넌트이며 "div" 문자열로 React.createElement()에 전달된다.
• <Foo />와 같이 대문자로 시작하는 경우는 "Foo" 문자열로 React.createElement()에 전달되는 건 동일하지만 내장 컴포넌트가 아닌 자바스크립트 파일 내에서 사용자가 정의했거나 임포트 한 컴포넌트를 가리킨다.

 

컴포넌트 렌더링은 어떻게?

• 엘리먼트 렌더링과 동일하게 root.render()에 인자로 컴포넌트를 전달하면 된다.

 

컴포넌트 합성이란?

• 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것이다.

 

컴포넌트 추출이란?

• 큰 컴포넌트에서 일부를 추출해서 새로운 컴포넌트를 만드는 것이다.
• 기능 단위로 구분하고 나중에 곧바로 재사용할 수 있는 형태로 추출하는 것이 좋다.
• 쉽게 말해서 컴포넌트 내의 반복되거나 기능으로 구분되는 코드를 함수로 추상화하는 것이다.

 

실습해보자

const style = {
    wrapper : {
        width : 800,
        height : 130,
        border : "1px solid black",
        borderRadius : 25
    }
};

function Project(props) {
    return (
        <div style={style.wrapper}>
            <h3>{props.name}</h3>
            <h4>{props.description}</h4>
        </div>
    );
}

export default Project;

• 우선 Project.jsx 파일을 작성하자.
• 상기 코드에서 style은 책에서 추가로 설명해 준 부분이다. 필요 없다면 생략해도 괜찮다.

 

const projects = [
    {
        name : "java-co-working project",
        description : "협업 자바 프로젝트"
    },
    {
        name : "java-schedule-project",
        description : "스케쥴 자바 프로젝트"
    },
    {
        name : "python-ai-project",
        description : "AI 파이썬 프로젝트"
    }
]

function projectList(props) {
    return (
        <div>
            {
                projects.map((project) => {
                    return (
                        <Project name={project.name} description={project.description}/>
                    );
                })
            }
        </div>
    );
}

export default ProjectList;

• 다음은 ProjectList.jsx 파일이다.
• ProjectList 컴포넌트는 Project 컴포넌트의 부모 컴포넌트이다.
• 즉 Project 컴포넌트에 props를 전달하여 리액트 엘리먼트를 생성하는 역할이다.

 

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
      <ProjectList />
    </React.StrictMode>
  );
);

reportWebVitals();

• 마지막으로 index.js에 ProjectList 컴포넌트를 작성해 주면 끝이다.
• 이제 실행 결과를 확인해 보자.

 

• 위 이미지처럼 프로젝트 목록이 렌더링 되었다면 실습을 정상적으로 마친 것이다.
• 보기에 이쁘진 않지만 지금은 css를 공부하는 게 아니므로 실제 프로젝트 수행을 할 때 스타일 요소를 다듬어 보도록 하자.  

 

마치며

• 오늘은 컴포넌트에 대해 알아보았다.
• 컴포넌트의 핵심 키워드 두 가지는 재사용성, pure이다. 꼭 숙지해 두도록 하자. 

개인적으로는 파편화된 정보들이 점점 연결되는 경험을 하고 있는데 글을 보는 여러분들에게도 정리한 내용이 잘 전달되었으면 좋겠다. 😊 

 

이미지 출처

[React] Component 를 사용하는 기본적인 방법

소플 - soaple.io