리액트는 왜 컴포넌트 기반일까?
- 재사용성 → 같은 틀을 반복할 필요가 없다.
- 관심사 분리 → 큰 코드 덩어리를 여러 작은 함수로 쪼갠다.
리액트 기초 지식
- 리액트 보일러 플레이트인 create-react-app을 사용하기 위해서는 node.js가 깔려있어야 한다.
npx create-react-app [project_name]
npm install // package.json 파일을 보고 프로젝트에 필요한 패키지와 개발에 필요한 것들을 다운로드-
npm install 이후 node_modules 폴더 생성 → 로컬에 다운로드 한 서드 파티 패키지 존재 → 편집하면 안됨!
-
일반적인 js 파일에서는 css를 임포트 할 수 없지만, 리액트에서는 가능하다.
-
index.js가 가장 첫번째로 실행된다.
-
react-dom, react → 리액트 종속 라이브러리이다.
-
순수 js가 아닌 부분은 Babel 을 통해 브라우저가 이해할 수 있는 순수 자바스크립트로 변환되어야 한다. Babel을 Package.json 안에서는 찾을 수 없고, yarn.lock 에 있는데 패키지 잠금 파일이다. HTML과 연결하는 작업이 필요한데 그 작업을 React-Dom이 한다.
// index.html의 <div id="root"></div>의 내부는 <App />으로 대체된다.
ReactDOM.render(<App />, document.getElementById('root'));- 개발자 도구 → Sources → Page → 0.chunk.js 등의 파일들 → 브라우저에서 실행되는 변환된 코드이다.
명령형 vs 선언형
// 기존 JS에서의 p태그 추가 코드 (명령형 방식)
const p = document.createElement('p');
p.textContent = 'This is also visible';
document.getElementById('root').append(p);
// JSX로 최종 상태를 정의하기만 하면 React가 뒷단에서 작동 (선언형 방식)
function App() {
return (
<div>
<h2>Let's get started!</h2>
</div>
);
}컴포넌트 트리 구조
- 최상위 컴포넌트만이 React DOM render의 지시로 html 페이지에 렌더링 됨.
- 컴포넌트는 단지 자바스크립트 함수이다.
- JSX 코드는 return시 하나의 루트 요소만을 가져야 한다.
FE developer