ReactJS | Component 개요

Component

• 리액트의 기본 동작 단위라고 할 수 있음
• 컴포넌트는 재사용 가능하게 작성되어야 함
• 부모 컴포넌트로부터 Props를 입력받아서
  리액트 요소(React Element)를 반환하는 형태로 동작
• 컴포넌트를 작성하기 위해서는 컴포넌트.js 파일 상단에
  import React from "react"; 를 작성해야 함
• 컴포넌트는 주로 기능별로 나누어서 작성
  es) 메인 컨테이너, 헤더, 메인 컨텐츠, 컨텐츠 아이템

---

Component hierachy

 

출처: https://yahooeng.tumblr.com/post/152078809581/refactoring-components-for-redux-performance

---

클래스형 Component

---

HTML

<div id="root"></div>

---

JSX

// React.Component를 상속하는 HelloReact 클래스형 컴포넌트 작성
class HelloReact extends React.Component{
  render(){
    /* render: 그림을 그리는 것이라고 이해하면 됨,
      return()의 ()안에 출력할 코드(반환할 HTML) 작성 */
    return(
    <h1>Hello React!!</h1>
    )
  }
}

/* 위에서 작성한 클래스를 어디에 그릴 것인가를 지정하는 것
    HTML파일의 root라는 아이디를 가진 div태그에 그리도록 설정 */
ReactDOM.render(<HelloReact/>, document.getElementById('root'));

※  클래스형 컴포넌트는 항상 render()함수를 가지며, render()함수 내부의 return()에 그려질 내용을 명시함

 

※ export default COMPONENT;
다른 JS파일에서 COMPONENT 컴포넌트를 사용할 수 있게 내보냄

---

함수형 Component

기존에는 부모 컴포넌트로 받은 값을 출력만 해주는 컴포넌트였으나
최근 업데이트 이후 리액트 프로젝트에서 빠질 수 없는 부분이 됨

• React Hooks 업데이트 이후 Functional Component에서도
  상태 관리(state)와 LifeCycle API 사용이 가능해짐

// 함수형 컴포넌트 HelloReact 작성
function HelloReact(){
  return(
  <h1>
     Hello React!!
  </h1>
  );
}

// HelloReact 컴포넌트 렌더링
ReactDOM.render(<HelloReact/>, document.getElementById("root"));

// 화살표 함수
const Comp = () => {
    return(
        <div>Hello World!</div>
    )
}

// Comp 컴포넌트를 외부 JS파일에서도 사용할 수 있게 함
export default Comp;

---

Arrow Function

ES6에 도입된 새로운 함수 선언 방식

[변수 선언부][함수명] = (함수 인자값) => {함수 내부 코드;}

// 예제
const func1 = () => "Hello World!";
const func2 = num => num * 2;

// 기존 함수 방식
function func1(){
    return "Hello World!";
}

function func2(num){
    return num * 2;
}

---

index.js

React 프로젝트에서 가장 먼저 찾게 되는 파일

export { default } from "./디렉토리"

• 각 컴포넌트 폴더에서 index.js에 위와 같은 구문을 작성해주면
  src/App.js에서 해당 컴포넌트를 import할 때 폴더 이름까지만 작성해주면 됨
  ex) src/components/Hello/Hello.js
  → import Hello from "./components/Hello"
• index.js에 위와 같은 코드를 작성하지 않는다면
  import Hello from "./components/Hello/Hello" 로 작성해야 함
• js파일인 경우 확장자는 기본적으로 생략 가능

---

리액트의 핵심이라고 할 수 있는 컴포넌트에 대해 간략히 알아보았습니다.

컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있는데 리액트 최근 업데이트로 Hook이 도입되면서

함수형 컴포넌트 작성이 권장되고 있다고 합니다.

리액트 컴포넌트를 작성할 때는 ES6 문법이 많이 사용되기 때문에

자주 사용되는 화살표 함수, 비구조화 할당, spread 등에 대해서 알아두면 도움이 많이 될 것입니다.