React Component 공부 소감
개인 프로젝트를 바닐라 자바스크립트로 진행했었다. 그 과정에서 버그 수정, 기획안 수정 등의 이유로 코드를 수정해야 하는 일이 빈번했다.당시 가독성 좋은 코드를 만들기 보다는 기능 구현에만 중점을 두어 HTML, CSS, JS 파일의 일부 요소를 바꾸기 위해 다른 부분까지 다시 수정하는 경우 내가 쓴 코드를 다시 이해하는데 시간이 걸렸다.
그때와 비교해 지금은 코드를 분할하고, 컨벤션에 맞게 작성하는 연습을 하면서 가독성이 좋은 코드를 작성하는게 협업과 소통을 위해 중요하다는 것을 알았다.
React의 Component를 사용하면 UI를 여러 블록 조각으로 분할하고 조각들을 각각 쉽게 관리할 수 있었다. 즉 React에서 UI는 컴포넌트의 조합이라고 생각할 수 있다.
다음은 중요하다고 생각한 내용을 정리하였다.
깃허브(링크) 에서 전체 코드를 확인할 수 있습니다.
React 와 Component 특징
선언형 JavaScript code
일반적인 자바스크립트는 명령형(Imperative) 코드이다. 하지만 React는 선언형(Declarative) 코드이다. React를 사용할 땐 UI를 정의하면 React가 어떤 명령어를 실행해야 해당 결과를 얻을 수 있는지 특정한다.
Component
Component는 해당 component가 사용될 때 표시되어야 하는 HTML(JSX) 코드를 return 하는 JavaScript 함수이다. React 앱이 몇개의 컴포넌트를 가질 수 있는지 제한이 없다. 필요한 만큼 만들어 사용하면 된다.
다음은 컴포넌트의 예시이다.
컴포넌트는 HTML, CSS, JavaScript를 한데 모아놓은 묶음이라고 볼 수 있다. ' import './ExpenseDate.css' '로 CSS 속성을 적용하고 HTML 코드를 반환한다. 그리고 이 모든것이 JavaScript 코드로 이루어져있다.
Props
React의 컴포넌트와 컴포넌트 사이에 데이터를 전달하고 받을 때는 props를 인수로 데이터를 전달 받는다. 이 props는 일반적인 JavaScript의 인수와는 다르게 객체의 형태로 받을 수 있다. 이후 'props.date'처럼 props의 속성을 꺼내어 전달받은 데이터를 이용할 수 있다.
JSX
JSX란 React에서만 활성화 되는 특수한 비표준 구문이다. JavaScript + XML 로 자바스크립트 안에 XML처럼 HTML의 내용이 들어간다.
위 코드의 ExpenseDate 함수의 return(~); 에서 괄호 안에 있는 부분이 JSX로 작성된다.
npm start를 하면??
리액트 앱을 npm start로 시작하면 다음과 같은 과정을 거친다.
- 서버를 가동하고 코드를 살펴본다.
- 코드를 실행하며 브라우저에 전달한다.
- index.js를 가장 먼저 실행한다.
- 이떄 전달하기 전에 여러 브라우저에서 기능들이 정상적으로 작동할 수 있도록 코드를 변형 시킨다.
다음은 index.js 실행 과정이다.
- react-dom으로부터 ReactDOM을 가져온다.
- 같은 폴더의 index.css를 브라우저에 주입한다.
- App.js를 받아와서 root Component로 설정하고 실행(랜더링)한다.
다음은 현재 루트 컴포넌트로 설정되어 실행되는 app.js 이다.
이 루트 컴포넌트에서 생성된 expenses라는 데이터를 Expense.js 컴포넌트에 prop로 전달한 모습이다.
이후 Expense.js 에서는 이 데이터를 props로 받아 이용할 수 있다.
