본 내용은 '처음 만난 리액트' 강의를 기반으로 작성하였습니다.
Component
리액트는 Component 기반의 구조이다. 리액트의 모든 페이지는 컴포넌트를 기반으로 작성되어있고 컴포넌트는 또 다른 여러개의 조합으로 구성될 수 있다.
React Component는 개념적으로 자바스크립트의 함수랑 비슷하다. 함수가 입력을 받아 출력을 내뱉는 것처럼 리액트 컴포넌트도 입력을 받아 정해진 출력을 내뱉는다. 리액트 컴포넌트를 하나의 함수로 접근하면 좀 더 이해하기 쉬워진다.
하지만 리액트 컴포넌트와 자바스크립트의 함수의 차이점은 분명하다. 리액트 컴포넌트에서의 입력은 Props라는 것이고 출력은 React element라는 것이다. 리액트 컴포넌트가 해주는 역할은 어떠한 속성들(Props)을 입력받아서 React element를 리턴해주는 것이다. 여기서 React element는 리액트를 구성하는 가장 작은 빌딩 블럭들이라고 생각하면 된다. 자바스크립트의 객체형태로 존재하며 화면에 보이는 것을 기술한다.
리액트 컴포넌트는 Props(속성)을 넣으면 해당 속성에 맞춰 화면에 나타날 element를 만들어준다.
본 강의에서 Component와 element를 붕어빵 틀과 붕어빵으로 비유한다. Component에 속성을 넣으면 element를 만들어내기 때문이다.
Props
Prop은 Property라는 단어를 줄인 단어이다. Property의 여러 뜻이 있지만 리액트에서는 속성이라는 뜻으로 쓰인다. Props는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체이다. 우리가 컴포넌트에 어떤 데이터를 전달하고, 전달한 데이터에따라 다른 모습을 화면에 렌더링하고 싶을때 해당 데이터를 props에 넣어 전달하는 것이다. 아까의 붕어빵을 예로 들자면 각기 다른 재료(Props)를 넣으면 각기 다른 붕어빵(Element)이 나오는 것이다.
Props의 특징 중 하나는 '읽기 전용'이라는 것이다. 그 말은 즉 '값을 변경 할 수 없다'라는 말이다. 데이터가 변경되면 새로운 값을 컴포넌트에 전달하여 새 element를 생성해야한다.
모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고, 같은 Props에 대해서는 항상 같은 결과를 보여줘야한다.
오늘 나의 이야기
리액트를 배우면서 어려운 개념들이 많이 나와 강의를 따라가는 것도 벅찼었다. 하지만 개념 하나하나를 정리하면서 강의를 들으니 더 잘 이해되는 기분이 든다. 항해99에서 다음주 주말부터 리액트 주차 시작이라 리액트에대해 전혀 모른채로 들어가게되면 많이 헤맬것 같아서 미리 공부해보았다. 어렵긴 하지만 생각보다 할만하다(?)라는 생각이 든다. 오늘의 나는 어제의 나보다 조금 더 성장했을지도..?
