리액트 기초1

리액트 강의를 들으면서...
배운 내용을 정리해보겟다.

우선 리액트를 프로젝트를 생성하기 위한 방법은 2가지가 있다.
CRA 방식, Vite방식 두가지를 이용하여 손쉽게 리액트 프로젝트를 만들 수 있다.

[리액트 프로젝트 생성]

- CRA 방식 (조금 느림)

1. yarn create react-app 프로젝트 이름
2. cd 프로젝트 이름
3. yarn start

- Vite 방식 (CRA에 비해 빠름)

1. yarn create vite 프로젝트 이름 --template react
2. cd 프로젝트 이름
3. yarn
4. yarn dev 하여 로컬 호스트 링크 가져오기

vite는 프론트엔드 개발을 위한 새로운 빌드 도구로 Evan You에 의해 개발되었다.
vite는 원래 vue.js 애플리케이션을 위해 만들어졌지만,
현재는 Recat, svelte, vanilla js 등 다양한 프레임워크와 라이브러리를 지원한다.

[파일 & 폴더 생성]

• 파일은 파스칼 케이스로 작성 SampleFile
• 폴더는 카멜 케이스로 작성 sampleFile

리액트 컴포넌트를 표현하는 두 가지 방법

1. 함수형 컴포넌트
2. 클래스형 컴포넌트
   두가지가 있는데 리액트에서는 함수형 컴포넌트를 권장한다.

[부모에서 자식으로 값을 내려주는 방법 props,User]

props?

- props 속성

부모 -> 자식 데이터를 전달할 때 쓴다.
컴포넌트끼리의 정보 교환방식이다.
부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터
다시말해, 컴포넌트 간의 정보 교류 방법이다.

- props 특징

1. props는 반드시 위에서 아래방향으로 흐른다.
2. 부모 -> 자식 방향으로만 흐른다(단방향)
3. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다!

사용 예시(실습)

위 실습 이미지처럼

자식이 부모의 값을 물려받는다는 것을 부모에 명시,
자식에 props로 부모의 값을 받아서
원하는 형태로 사용

User?

사용 예시(실습)

props.children을 사용하면
User태그 안의 내용이 나오고

props.abc를 출력하면
User 안에 선언된 abc= "값1"이 출력되는걸 확인해볼 수 있다.

Children의 용도

• Layout 컴포넌트를 만들 때 주로 사용
  Layout 컴포넌트가 쓰여지는 모든 곳에서 안에 있는 정보를 받아서 가져올 수 있다.
• Layout컴포넌트는 어떠한 틀을 만들어주는 컴포넌트 예를 들어 main태그 안의 헤더와 푸터는 고정되었고 안의 컨텐츠만 바뀜

사용 예시(실습)

사용 결과(실습)

props 구조분해 할당을 이용하기

props에 값이 300개 있다면
항상 props.title이라고 작성하기 힘드니까.
const {title} = props;라고 선언한 후
{title}을 원하는 곳에 가져다 쓰면 됨

const {title} = props라고 선언하는 대신

const ToDo ({title}) => {
	// 생략
}

이렇게 많이 사용됨