react JS3 React 4 - React Router 리액트의 특징 리액트는 여러 컴포넌트들을 만들지만, 브라우저에 최종 렌더링되는 html문서는 1개인 SPA(Single Page Application) 방식을 지향합니다. 이에, 렌더링되는 한 개의 HTML 문서에서 여러 개의 페이지를 보여주거나 이동시켜주는 Routing기능을 필요로 합니다. Routing 라우팅이란, 정해진 경로명(주소)에 따라 다른 View(페이지)를 보여주는 것을 뜻합니다. 하지만 리액트 자체에는 이러한 라우팅 기능이 내장되어 있지 않아, 외부 라이브러리를 설치하여 적용하여야 합니다. React-router는 리액트의 라우팅 기능 적용을 위해 가장 많이 사용되는 외부 라이브러리입니다. React-router 설치 아래 npm 메시지를 통해 react-router를 설치합니다. np.. 2020. 9. 3. React 3 - 컴포넌트 컴포넌트 재사용 가능한 UI 구성의 기본 단위를 뜻합니다. 페이스북을 예로 든다면, 로그인 후 첫 메인화면에서의 컴포넌트는 1)상단 컴포넌트, 2)메인 컴포넌트 내의 NewsFeed 컴포넌트, 3) 메인 컴포넌트 내의 친구추천 컴포넌트 4) 페이지 맨 하단의 Footer 컴포넌트 등으로 나눌 수 있습니다. 컴포넌트들은 다시 다른 페이지에서 재사용할 수 있습니다. 컴포넌트의 특징 다른 페이지에서도 재사용이 가능합니다. 각 페이지 내에 접근하여 일일이 수정하지 않고, 해당 컴포넌트만 수정해주면 되기 때문에 유지보수가 용이합니다. 해당 페이지가 어떻게 구성되어 있는지 한 눈에 살펴보기 좋습니다. 컴포넌트는 또 다른 컴포넌트를 포함할 수 있으며, 컴포넌트이 특성(Props)을 전달할 수 있습니다. (부모 - 자.. 2020. 8. 30. React 2 - CRA 초기 세팅 & JSX CRA 초기 폴더 및 파일 세팅 CRA 세팅 시에 초기 폴더에 구성되는 요소들에 대한 설명입니다. 1. node.modules : CRA를 구성하는 모든 노드 패키지 종류와 소스 코드가 존재하는 폴더입니다. 2. package.json : CRA 기본 패키지 외에, 추가로 설치된 라이브러리/패키지의 종류와 버젼이 기록되는 파일입니다. - "dependencies" : 리액트를 사용하기 위한 모든 패키지의 종류와 버젼 확인 * package.json의 존재 이유 : 협업을 할 때, 리액트 구동에 필요한 모든 소스코드 및 패키지 (ex : node_modules)를 모두 깃헙에 올리는 건 번거롭고 불편합니다. 대신에, package.json에 사용된 모든 라이브러리를 명시해놓고, 다른 사람이 해당 소스를 p.. 2020. 8. 30. 이전 1 다음
