CRA(Create React App)
[학습 목표]
1. CRA의 개념에 대해 설명할 수 있습니다.
2. CRA 명령어로 프로젝트를 생성하고 열 수 있습니다.
3. 왜 CRA로 생성한 웹 애플리케이션이 열리게 되는지 대략적인 흐름을 설명할 수 있습니다.
4. 상대경로와 절대경로의 개념에 대해 숙지하고, 리액트 프로젝트 내에서 절대경로를 사용하는 방법을 알 수 있습니다.
CRA란 무엇일까요?
Create React App : Set up a modern web app by running one command.
[출처 : 공식문서]
- 한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법
-> 보일러플레이트
보일러 플레이트 코드의 어원은 신문사업에서 나왔다. 1890년대에 광고나 칼럼과 같이 계속 사용되는 텍스트 인쇄판은 부드러운 납 대신 강철로 찍기 시작했다. 이를 Bollerplate라고 불렀다.
CRA로 프로젝트 생성하기
우리의 첫 리액트 프로젝트를 만들어 봅시다.
윈도우는 git bash 또는 power shell에서 mac os는 터미널에서 아래 코드를 입력해볼까요.
참고로 power shell 은 윈도우 터미널 프로그램이고, git bash는 우리가 git을 설치했을 때
같이 설치되는 터미널 프로그램입니다! 맥을 쓰시는 분들은 맥 터미널을 사용하시면 됩니다!ls #현재 내가 위치하고 있는 곳이 어디인지 확인해보세요.
cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어갑니다.
yarn create react-app week-1 #프로젝트 생성!
CRA로 생성한 프로젝트 실행하기
cd week-1 # week-1 폴더로 이동
yarn start # 프로젝트 시작
React Component
[학습 목표]
1. 리액트 컴포넌트가 무엇인지 이해합니다.
2. 함수형 컴포넌트와 클래스형 컴포넌트의 존재를 확인하고, 우리의 주 도구는 함수형 컴포넌트라는 것을 알 수 있습니다.
3. 우리가 만든 CRA 프로젝트를 컴포넌트 관점에서 해석할 수 있습니다.
4. 부모-자식 컴포넌트를 만들고 그 관계를 이해할 수 있습니다.
React Component란?
컴포넌트 개념 이해하기
컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다.
개념적으로 컴포넌트는 JavaScript 함수와 유사합니다.
“props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.
리액트 컴포넌트를 표현하는 두 가지 방법
1.함수형 컴포넌트
// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
return <div>hello</div>
}2.클래스형 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}결론적으로 리액트 세계에서 말하는 컴포넌트(블럭)는 즉 html을 return 하는 함수 입니다.
우리가 만든 CRA 프로젝트 살펴보기
코드 살펴보기
import 'App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;Component 보는 방법
컴포넌트 밖에서는 내가 필요한 파일을 import 하거나, 또는 export default 라는 기능을 통해 내가 만든 컴포넌트를 밖으로 내보내는 코드가 있습니다.
컴포넌트 안에서는 자바스크립트를 쓸 수 있는 부분이 있습니다. 여러분이 컴포넌트 안에서 어떤 자바스크립트 코드를 작성하고 싶다면 여기에다가 작성합니다.
그리고 return 을 기준으로 아랫부분에서는 HTML(정확히 말하면 JSX입니다. )을 작성할 수 있습니다. 여기에 작성한 html 코드와 값들이 화면에 보여집니다.
주의할점
- 컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야 합니다.
- 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓습니다.
실습(1) - 컴포넌트 만들어보기 중 에러
권한이 없어서 나는 에러라고 한다.
- Windows Powershell을 관리자 권한으로 실행
- get-help Set-ExecutionPolicy 를 입력하고 Y를 입력
- Set-ExecutionPolicy RemoteSigned 를 입력하고 Y를 입력
부모-자식 컴포넌트
컴포넌트 안에 컴포넌트 넣기
컴포넌트는 다른 컴포넌트를 품을 수 있습니다. 이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고, 다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 부릅니다.
src/App.js
import React from "react";
function Child() {
return <div>연결 성공</div>;
}
function Mother() {
return <Child />;
}
function GrandFather() {
return <Mother />;
}
function App() {
return <GrandFather />;
}
export default App;