Daily Coding - FE 2주차 - 17강 18강

 

개발 공부 다시 시작!!

17강

Creat React App

: https://create-react-app.dev/

 

react 프로젝트 만드는 법

1. npx create-react-app my-app

: 'my-app' 은 프로젝트 이름을 뜻함

: 사용자가 임의로 지정할 수 있는 부분이다.

: 터미널을 실행한 후 위 명령어를 입력하면 프로젝트가 설치가 된다.

 

2. cd '프로젝트 이름'

: 해당 경로로 이동한다

 

3. npm start

: 리액트가 실행 된다

 

 

리액트가 컴포넌트를 사용하는 이유

1. 재사용성

: 코드를 반복해서 쓰지 않기 위해

: 하나의 코드를 만들어서 여기저기 사용할 수 있게 만들기!

 

2. 관심사 분리

: 하나의 컴포넌트에 너무 많은 걸 담지 않기

: 관리를 수월하게 만드는 이유

 

Component 구성

1. HTML

: 레이어 아웃 (골격을 만들는 아이)

 

2. CSS

: 레이어 아웃에 스타일링

 

3. JavaScript

: 정적인 페이지를 동적으로 만들어 줌 (이벤트, 로직들을 실행)

 

 

리액트 프로젝트의 구성

1. node_modules

: npm으로 설치하고 실행하면 자동으로 생기는 폴더

: node.js의 필요한 여러가지 모듈을 폴더 단위로 관리하는 아이

: npm install 할 때 만들어지게 됨

: 현재 프로젝트에 설치된 모든 npm 패키지가 들어 있는 디렉터리

: 보통 깃과 같은 저장소에 올릴 때는 이 폴더를 함께 올리지 않음

 

2. public

: 정적 파일이 들어 있는 디렉터리

: index.html 파일과 애플리케이션에 필요한 기타 정적 파일들이 포함되어 있음

: 컴파일이 필요 없는 파일들이 위치하는 폴더

 

3. src

: 작업하게 될 모든 소스코드 폴더

 

 

src의 구성

1. index.js

: React DOM을 사용하여 React 애플리케이션을 public/index.html의 root div에 렌더링한다

 

2. App.js

: 메인 애플리케이션 컴포넌트

: 모든 컴포넌트의 최상단 컴포넌트임

 

 

Component 만들기

1. Visual Code 확장앱 'Reactjs code snippets' 설치

 

2. src 내 새로운 폴더 생성 ex) component

   : 폴더명은 임의로 지정.

 

3. 생성 한 폴더 내 js 파일 생성 ex)Test.js

   : 파일명 임의 지정

 

4. js 파일 내 'rsc' 입력하여 빈 컴포넌트 생성

 

5. App.js 에서 생성 한 js 파일을 불러온다

 : <header>태그 위에 '<생성한 js 파일명></생성한 js 파일명>' 입력

 : 상단에 import  생성한 js 파일명 from './components/생성한 js 파일명'; 이 생성 됨.

ex)<Test></Test>

 

 

 

18강

JSX

: JavaScript XML을 말함

: JavaScript 안에 있는 HTML 코드

: 하나의 컴포넌트에는 반드시 하나의 root element를 리턴해야 한다

 

하나의 부모 태그로 감싸줘야 함	부모 태그가 없으므로 오류가 남
import React from 'react'; const section = () => { return ( <div>      <div>This is div tag</div>      <p>This is p tag</p>      <button>This is button tag</button> </div> ); }; export default section;	import React from 'react'; const section = () => { return ( <div>This is div tag</div> <p>This is p tag</p> <button>This is button tag</button>   ); }; export default section;