[React] React 학습 (3) - Component

Components

컴포넌트는 React, Vue등에서 중요한 부분이다.

모든 페이지가 컴포넌트로 구성되 있고 하나의 컴포넌트는 또 다른 여러개의  조합으로 구성될 수 있다.

그리고 이러한 컴포넌트들을 마치 레고 블록을 조립하듯이 끼워 맞춰서 새로운 컴포넌트를 만들수 있는 것이다.

하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어서 자연스레 개발시간과 유지 보수 비용을 줄일 수 있다.

컴포넌트는 개념적으로는 자바스크립트의 함수와 비슷하다.

함수가 입력을 받아서 내뱉는 것처럼 리액트 컴포넌트도 입력을 받아서 정해진 출력을 내뱉는다.

그래서 컴포넌트를 그냥 하나의 함수라고 생각하면 좀 더 쉽게 개념을 이해할 수 있다.

하지만 컴포넌트의 입력과 출력은 일반적인 함수와는 조금 다르다.

리액트 컴포넌트에서의 입력은 props라는 것이고 출력은 앞글에서 학습했던 리액트 엘리먼트가 된다.

결국 리액트 컴포넌트가 해주는 역할은 어떤한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴해주는 것이다.

즉, 리액트 컴포넌트는 만들고자 하는 대로 props, 즉 속성을 넣으면 해당 속성에 맞춰 화면에 나타날 엘리먼트를 만들어 주는 것이다.

이 과정은 객체 지향 개념에서 나오는 클래스와 인스턴스의 개념과 비슷하다고 볼수 있을거 같다.

이전 글에서 붕어빵을 예로 들었었는데 JAVA 수업을 들을때 이해하기쉽게 예를 들어주셨던게 붕어빵이였다.

클래스라는 붕어빵 틀에서 인스턴스라는 실제 붕어빵이 만들어져서 나오는 것, 객체 지향과 다를 것이 없어보였다.

객체지향을 완벽히 이해하진 않았지만 어느정도 복습하면서 학습하면 좋을거 같다.

---

Props

먼저 props는 prop 뒤에 복수형을 나타내는 알파벳 s를 붙여서 prop이 여러개인 것을 의미한다.

prop은 property라는 단어를 줄여서 쓴것이다.

property는 재산이라는 뜻도 있지만 속성, 특성이라는 뜻도 가지고 있는데, 리액트에서는 컴포넌트의 속성으로 사용된다.

리액트 컴포넌트는 붕어빵틀로 비유 했는데 그렇다면 여기서 props가 나타내는 것은 무엇일까?

props는 붕어빵에 들어가는 재료를 의미한다고 볼 수 있다.

같은 붕어빵이라도 어떤 재료를 넣느냐에 따라 다른 맛이나고 재료가 다른것처럼 props도 컴포넌트에서 눈에 보이는 글자나 색깔 등의 속성을 바꾸는 컴포넌트 속 재료라고 생각하면 된다.

props는 컴포넌트에 전달할 다양한 정보를 자바스크립트 객체로 담고 있다.

컴포넌트에 어떤 데이터를 전달하고 전달된 데이터에 따라 다른 모습의 엘리먼트를 화면에 렌더링 하고 싶을때 props에 넣어서 전달한다.

---

Component의 종류

리액트에서 컴포넌트는 크게 
Function Component와 Class Component 로 나뉜다.

리액트의 초기 버전에서는 클래스 컴포넌트를 주로 사용했는데
클래스 컴포넌트가 사용하기 불편하다는 의견이 많이 나왔고,
이후 함수 컴포넌트를  개선해서 주로 사용하게 되었다.

함수 컴포넌트를 개선하는 과정에서 개발된 것이  바로 Hook이라는 것인데 추후에 자세히 알아보도록 하자.

현재 리액트 개발에서는 거의 Hook을 사용한다고 생각하면 된다.

그렇다고 클래스 컴포넌트를 아예 학습하지 않는것은 안된다.

---

Function Component

 

모든 리액트 컴포넌트는 pure 함수 같은 역할을 해야 한다.

이 말은 결국 리액트의 컴포넌트를 일종의 함수라고 생각한다는 뜻이다.

간단한 함수 컴포넌트 예제를 한번 보자.

function Welcome(props) {
   return <h1>Hello, {props.name}</h1>
}

위에 함수의 경우 하나의 props 객체를 받아서 인삿말이 담긴 리액트 엘리먼트를 리턴하기 때문에 리액트 컴포넌트라고 할 수 있다.

그리고 이렇게 생긴 것을 우리는 함수 컴포넌트라고 부른다.

코드가 굉장히 간단하기 때문에 함수 컴포넌트는 간단한 코드라는 장점을 가진다고 할 수 있다.

---

Class Component

 

클래스 컴포넌트는 JavaScript ES6의 Class를 사용해서 만들어진
컴포넌트다.

클래스 컴포넌트의 경우에는 함수 컴포넌트에 비해서 몇 가지 추가적인 기능을 가지고 있다.

아래는 클래스 컴포넌트의 코드다.

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

이 코드는 위에서 살펴본 함수 컴포넌트와 동일한 역할을 하는 클래스 컴포넌트다.

함수 컴포넌트와의 가장 큰 차이점은 리액트의 모든 클래스 컴포넌트는 React.Component를 상속 받아서 만든다는 것이다.

 상속이라는 것은 객체 지향 프로그래밍에서 나오는 개념인데 한 클래스의 변수들과 함수들을 상속 받아서 새로운 자식 클래스를 만드는 방법이다.

여기에서는 React.Component라는 클래스를 상속받아서 Welcome이라는 클래스를 만들었고 이는 React.Component를 상속 받았기 때문에 결과적으로 리액트 컴포넌트가 되는 것이다.

---

React Conventions

리액트 컨벤션을 설명하기 앞서 컨벤션이란 협업 시 유지보수 및 가독성, 코드 이해를 위해 지켜지는 개발자들 사이의 규칙이다. 

효율적이고 관리하기 쉬운 코드를 만들기 위해(유지보수) 효율적으로 규칙을 정해야 한다.

그렇다면 리엑트에는 어떤 컨벤션이 있는지 알아보자.

컴포넌트의 이름을 지을 때 항상 대문자로 시작해야 한다.

왜냐하면 리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 인식하기 때문이다.

예를 들어 div나 span과 같이 사용하는 것은 내장 컴포넌트라는 것을 뜻하며 div나 span과 같은 문자열 형태 React.creacteElement에 전달된다.

하지만 대문자로 시작하는 Foo와 같이 대문자로 시작하는 경우에는 React.createElement foo 형태로 컴파일되며 JavaScript 파일내에서 사용자가 정의했거나 임포트한 컴포넌트를 가리킨다.

그렇기 때문에 컴포넌트의 이름은 항상 대문자로 시작해야 한다.

아래 예제코드를 보면서 확인해보자.

// HTML div 태그로 인식
const element = <div />;

 

// Welcome이라는 리액트 컴포넌트로 인식
const element = <Welcome name="수빡" />;

첫번째 코드는 DOM태그를 사용하며 엘리먼트를 만든 것이다.

DOM태그들은 div, h1, span 등 처럼 모두 소문자로 시작한다.

두번째 코드는 사용자가 정의한 welcome이라는 컴포넌트를 사용한 엘리먼트다.

만약 여기서 컴포넌트 이름을 소문자로 시작했다면 리액트는 내부적으로 컴포넌트가 아니라 DOM 태그라고 인식하게 된다.

결과적으로 에러가 발생하거나 우리가 원하는 대로 결과가 나오지 않게 된다.

그래서 항상 컴포넌트의 이름은 대문자로 시작해야 된다는 사실을 꼭 기억해야 한다.

만약 컴포넌트 이름을 꼭 소문자로 사용하고 싶다면 먼저 대문자로 시작하는 변수에 할당한 뒤 이 변수를 사용하면 된다.

하지만 웬만하면 대문자로 사용하는 것을 권장한다.

---

Component Rendering 

 

컴포넌트를 다 만든 이후에 실제로 렌더링 하면 어떻게 해야 할까?

앞서 말한거 처럼 컴포넌트는 붕어빵 틀의 역할을 합니다.

그렇기 때문에 실제로 컴포넌트가 화면에 렌더링 되는 것은 아니다.

컴포넌트라는 붕어빵 틀을 통해 찍어줘서 나온 엘리먼트라는 붕어빵이 실제로 화면에 보이게 되는 것이다.

그렇다면 렌더링을 위해서는 가장 먼저 컴포넌트로부터 엘리먼트를 만들어야 된다.

// DOM 태그를 사용한 element
const element = <div />;

 

// 사용자가 정의한 Componenn를 사용한 element
const element = <Welcome name="수빡" />;

이 두줄의 코드는 모두 리액트 엘리먼트를 만들어내는데, 이 엘리먼트를 렌더링하기만하면 된다.

아래 코드는 실제 렌더링하는 코드다.

function Welcome(props) {
    return <h1>안녕, {props.name}</h1>;
}

 

const element =  <Welcome name="수빡" />;
ReactDOM.render(
   element,
   document.getElementById('root')
);

위 코드에서는 먼저 Welcome이라는 함수 컴포넌트를 선언하고 있다.

그리고 welecome name 수빡이라는 값을 가진 엘리먼트를 파라미터로 해서 ReactDOM.render 함수를 호출한다.

이렇게하면 리액트는 Welcome 컴포넌트에 name 수빡이라는 props를 넣어서 호출하고 그 결과를 리액트 엘리먼트가 생성됩니다.

이렇게 생성된 엘리먼트는 최종적으로 리액트 돔을 통해 실제 돔에 효과적으로 업데이트 되고  우리가 브라우저를 통해 볼수 있게 된다.