React

A JavaScript library for building user interfaces

🤖오늘 배운 내용

리액트를 쓰는 이유?

웹사이트 페이지 이동, 변경이 부드럽게 동작함

creat react app ( CRA )설치하기

npx create-react-app (프로젝트명)
cd (프로젝트명)
npm start

이 외에도 yarn 을 통해서도 가능하다

설치: npm install -g yarn
버전확인(설치확인): yarn -v
패키지 설치: yarn add [설치할 패키지 이름]

Component

앱을 이루는 코드들의 조각

1.src 폴더안에 파일 만들기

(대문자로 시작, 카멜케이스로 사용)

2.함수 만들기

(return문 안에 JSX문법을 사용하여 작성하면 된다)

JavaScript 함수 와 유사하다.

컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.

리액트 컴포넌트는 함수형과 클래스형 두가지가 있지만 공식에서는 함수형 컴포넌트를 사용하기를 권장하고 있다.

부모-자식 컴포넌트

컴포넌트는 다른 컴포넌트를 품을 수 있습니다. 이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고, 다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 한다.

JSX

JavaScript를 확장한 문법 : HTML을 품은 JS

JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법( HTML적 요소)

★html과 다른 부분
className을 카멜케이스를 사용하여써야 하며, 인라인으로 style속성을 넣을 경우 객체타입으로 들어가기 때문에 자바스크립트 + 객체+ 따옴표를 주의 해야 한다.

props (컴포넌트에 속성 부여하기)

파라미터로 props를 사용하면 해당 태그가 객체 형태로 들어온다.

*props로 리스트 구현하기

위와 같은 하드코딩은 좋지 않음

for문을 사용하여 구현하기