[TIL] React Intro

🚀 학습 목표

1. 어떠한 흐름으로 오늘날 React가 많이 사용되고 있는지 설명할 수 있다.
2. React가 무엇인지 정의할 수 있다.
3. CRA를 설치하고 폴더와 파일이 어떻게 구성되어 있는지 설명할 수 있다.
4. Component의 개념과 종류에 대해 설명할 수 있다.
5. JSX 를 정의하고 기본 특성에 대해 설명할 수 있다.
6. 기존에 구현한 Westagram을 React로 변환해 렌더링 할 수 있다.

💡 무조건 코드 많이 쳐서 익히자!

 

 

3세대 웹이 나타난 이유?

• 웹이 발전하며 처리해야할 것이 많아짐
• 프론트엔드와 백엔드가 나눠짐

 

대표적인 웹 프레임워크 & 라이브러리

• 앵귤러Angular → 프레임워크
• 뷰Vue → 프레임워크
• 리액트React → 라이브러리

 

웹 프레임워크 & 라이브러리의 차이

• 내장 기능 유무 차이
• 프레임워크 → 에어비앤비(구비되어 있음)
• 라이브러리 → 원룸(필요한 것은 사야됨)

 

CRA Create-React-App

• 복잡한 React 개발 환경을 쉽게 구축해 줌
• npx create-react-app 으로 실행

 

Node?

• 자바스크립트 실행기
• 브라우저 밖에서도 자바스크립트를 실행 가능

 

npm Node Package Manager

• Node.js에서 사용하는 모듈을 패키지로 관리/배포

 

Component

• 재사용 가능한 각각의 독립된 모듈
• 재사용 가능한 ui 구성 단위

 

class

• 초기에 많이 사용되던 컴포넌트 형태
• 읽을 수 있어야 함!

 

Function

• 업데이트 후 가장 많이 씀
• 함수 시작은 대문자로 PascalCase

 

react.fragment

• https://ko.reactjs.org/docs/fragments.html

 

HTML > js 변환 시

• html 옮길때 class ⇒ className 으로 변경
• class 클릭 커맨드D 전체선택 모두 변경

 

---