React 정리(생활코딩 React) - 추가 중

1일차

 

1. 리엑트를 쓰는 이유는?

1.1. html 코드를 캐비냇으로 정리한다 

1.2 컴포넌트, 즉 사용자 정의 태그

 

2. 리엑트 개발환경 설치 방법

2.1. 툴 체인과 create-react-app

2.2. create-react-app의 설치방법, 그리고 npm과 npx

2.3. 리엑트 앱 실행

 

3. 리엑트 앱 코딩하기

3.1. public 폴더와 inidex파일, 그리고 src폴더

3.2. (함수형 컴포넌트를 클래스 방식 컴포넌트로 변경하기)

3.3. create-react-app의 기본 코드를 변경해보고 결과 확인하기

3.4. import된 파일들 - css파일과 컴포넌트들

 

4. 배포하기

4.1. 용량이 큰 create-react-app

4.2. build 하는 방법

4.3. 서버 제작과 build한 파일 실행

 

5. 리액트의 필요성

5.1. 순수한 html 코드 만들어보기

5.2. html 코드를 컴포넌트로 재구성한다면?

5.3. html 코드를 컴포넌트로 변경하기

5.4. (js가 아닌 코드, JSX)

5.5. 컴포넌트란 이름표가 달려있는 캐비냇이다

 

 

2일차, 3일차

1. props

1.1 컴포넌트의 유용함, 재사용성

1.2 컴포넌트 안의 값을 변경하는 방법, props

 

2. React Developer Tools

2.1 완성한 코드를 html이 아닌 react 구조로 보는 방법

 

3. 컴포넌트를 파일로 분리하기

3.1 컴포넌트를 파일로 분리해야하는 이유

3.2 새 파일에 react 코드를 작성하는 방법(클래스 방식으로)

3.3 다른 파일에 있는 컴포넌트를 불러오기

 

4. state

4.1 constructor(생성자) 함수 안에 state 코드 작성하기

4.2 state값으로 props 값 설정하기

4.3 state와 props를 이용해 동적으로 <li> 만들기

4.4 만약 state나 props의 값이 바뀐다면? (재 랜더링)

4.5 이벤트 프로그래밍 만들기

 4.5+ debugger

 4.5+ .bind(this)

4.6 state값을 변경하는 방법, 그리고 setState를 사용해야 하는 이유

4.7 컴포넌트 이벤트(나만의 이벤트 만들기)

 4.7+ e.preventDefault()

4.8 자식 컴포넌트에서 부모 컴포넌트의 state값을 바꾸기(컴포넌트 이벤트를 이용)

 4.8+ data-접두사가 붙은 속성과 e.target.dataset

4.9 props 값은 read only

 

4일차

1. Create 만들기

1.1 변수에 컴포넌트 넣기

 1.1+ form 태그의 action과 method

1.2 배열의 push함수와 concat 함수

1.3 name 속성에 이름을 지정해 e.target으로 지정될 수 있게 하기

 

2. shouldComponentUpdate

2.1 sholdComponentUpdate 함수에서 출력해보기

2.2 shouldComponentUpdate 함수의 두 매개변수

2.3 shouldComponentUpdate 함수의 return 값과, 값에 따른 작동 방식

2.4 그래서 should... 함수란?

2.5 should... 함수를 이용해서 render 시키지 않는 법

2.6 그래서...

state에 있는 값을 바꿀 때 원본을 수정하지 않고 복제본을 수정해야하는 이유

2.7 배열의 불변성

2.8 불변성을 유지하는 몇 가지 방법