Component에 대하여 (리액트)

1. 개요

React는 Component-Based Language이다. 따라서 컴포넌트라는 개념자체가 매우 중요하다. 또 함수에서 인수의 역할을 Component에서는 Props라는 녀석이 한다. 따라서 Component가 중요해진 만큼 Props에 대한 개념 이해도 중요해진다. 같이 살펴보자. 

2. Component에 대하여 

Component란 하나의 기능을 하는 JavaScript Code를 의미한다. 컴포넌트가 함수와 형태가 매우 유사한데, 이는 하나의 기능이 의미가 있으려면 입력을 받아 특정 결과값을 출력 해야하는데, 그래서 컴포넌트의 형태가 함수를 따라간게 아닌가 싶다. 기본적인 JavaScript의 함수와 차이점이 있다면 당연히 입력을 받는 값과, 출력하는 값이 다르다는 것이다. 

함수는 당연하게 어떠한 입력값 (문자열, 객체, 그냥 숫자 등등)을 받아 원하는 결과를 출력하면 된다. React Component의 경우 Props를 입력 받아서 저번 포스팅에서 배운 React element를 출력한다. React elements는 '화면에 그리는 내용에 대해 기술한 JavaScript 객체이다.' Props는 해당 컴포넌트에 쓰일 입력 값이다. 함수에서 말하는 입력보다 더 넓은 의미를 가지지만, 여기서는 대략 Props = 인수라는 인상만 가져가도 충분하다. 

ⓐ React가 Component-Based라는 것은 무엇을 의미하나? 

컴포넌트-Based란, 필요한 컴포넌트들을 정의해놓고,
필요한 기능들을 그때 그때 레고블록 조립하듯이 조합하여 개발 하겠다는 의미이다!

컴포넌트에 대해서는 대략 살펴봤다. 나는 개인적으로, Props를 인수로 받아 화면을 그리는 javaScript 객체를 출력하는 함수 정도의 인상을 받았다. 더 공부해가면 정의가 더 명확해질 것 같다. 
  잡설은 각설하고 그래서 Component-Based라는 것이 무엇을 의미하고 왜 중요한가? React에서는 하나의 Component에 하나의 기능을 정의 한다. 그리고 해당 기능이 동시에 여러번 필요할 때 마다, 입력하는 Props 값만 바꿔서 재활용 한다. 예시는 다음과 같다.

위는 에어비엔비 화면이다. 저기서 보이는 카드 뷰들은 모두 컴포넌트들을 재활용 하여 나타낸 것이다. 

위의 작은 카드뷰는 props 값만 바꿔서 4번 재활용 되었고, 큰 카드뷰는 2번 재활용 되었다. 어쩌면, 카드 뷰 크기도 props 인자 값으로 넘겨서 A,B가 같은 것일 수도 있다! 이렇듯 Components-Based라는 것은 재활용과 의미가 깊다는 것을 인지하면 좋을 것 같다. 

객체 지향을 공부했다면 쉬운데, 컴포넌트를 클래스에 대입해서 생각하면 된다. 저 붕어빵 틀처럼 하나의 설계도이다. 우리는 그 붕어빵 틀을 통해 실제 사용하는 붕어빵 즉 Elements를 만들어 사용한다. Elements는 객체지향으로 치면 인스턴스로 간주하면 된다. 이제 Props라는 개념까지 넣는다면, 하나의 컴포넌트로 붕어빵 틀은 못 고치지만 그 안을 채우는 값들은 고칠 수 있다. Props 값을 다르게 하면 팥 붕어빵, 슈크림 붕어빵, 고구마 붕어빵을 만들 수 있다! 

위의 에어비엔비도 해당 원리를 따른 것이다. 

다음은 Props에 대해서 더 자세히 다뤄보겠다.