TIL 17 React - Component

Component

컴포넌트란?

컴포넌트는 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능과 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 업데이트될 때, 사라질 때 작업들을 수행할 수 있다.

• component : 재활용 가능한 UI 구성 단위
• 하나의 페이지에서 여러 컴포넌트들로 조립을 한다고 상상하면 된다.

컴포넌트의 특징

• 재활용성
• 코드 유지보수
• 해당 페이지의 구조 파악이 쉬워짐
• 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다.(부모 <-> 자식(부모) <-> (자식))

컴포넌트 선언 방식

Class Component

render()는 React.Component의 하위 class에서 반드시 정의해야하는 메서드이다. 만약 React를 처음 접했다면 함수형으로 공부하기 보다는 Class형으로 공부하는 것이 도움이 더 된다. 그 이유는 모든 컴포넌트는 여러 종류의 생명주기 메서드(Lifecycle methods)를 가지고, 이 생명주기를 이해하려면 Class형으로 공부해야 더 쉽기 때문이다. 그리고 state, props 등 React의 주요 개념들을 학습하기 좋기 때문이다.

생명주기 포스팅, 공식문서

• https://velog.io/@wndud0647/TIL-3-React-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0LifeCycle
• https://ko.reactjs.org/docs/react-component.html

Functional Component

함수형 컴포넌트는 클래스형보다 간단하고 작성하기 편리한 장점이 있고, 메모리 자원을 덜 사용한다. 과거에는 함수형 컴포넌트에서 Lifecyle API와 state를 사용할 수 없었지만 리액트 훅이 도입되면서 해결되었다. 지금은 공식문서에서도 함수형 컴포넌트 + hook을 사용하는 것을 권장하고있다.

사용 예시

인스타 클론코딩을 하면서 하나의 화면에서 컴포넌트 단위로 나누면서 컴포넌트의 장점을 직접 느꼈다. 첫 부분은 스토리를 보여주는 화면에서 저 원 모양의 스토리들이 계속해서 반복된다. 아직은 데이터가 없어서 임의로 데이터를 만들고 구현했다.

컴포넌트로 분리하기 전에는 <li>를 복사 붙여넣기로 단순무식하게 구현했었다. 하지만 컴포넌트로 분리하여 map() 메소드를 이용해 정말 간단하면서 재사용이 가능해지는 컴포넌트를 만들었다.

  render() {
    return this.state.list.map((list) => {
      return (
        <li key = {list.id}>
          <a href="">
            <div className="headImgBox">
              <img src={list.url} alt="" />
            </div>
            <span>{list.value}</span>
          </a>
        </li>
      );
    });
  }

그리고 피드도 컴포넌트를 분리하였는데 피드 컴포넌트 자식에 Comment컴포넌트를 또 나누어서 피드는 피드대로 관리할 수 있고, 댓글은 댓글대로 관리할 수 있게 되었다.

구조를 명확히 짜보니 이제는 수정이 필요한 컴포넌트에 빠르게 찾아가서 그 컴포넌트만 작업을 할 수 있게 되었고, 리액트의 매력을 많이 느꼈다.