따라하며 배우는 리액트 A-Z - To-do 앱 - [John Ahn]

섹션 1 리액트란  

리액트는 프레임워크가 아닌 라이브러리

 

 

 

 

리액트 컴포넌트

 

 

 

 

브라우저가 그려지는 원리와 가상돔

  

 

 

 

 

리액트 설치를 위해서 필요한 것들 (Node.js & Visual Studio Code)

 

 

 

 

 

 

 

 

 

 

 

섹션 2 간단한 To-Do 앱 만들며 리액트 익히기

Create React App으로 실행된 리액트의 기본 구조 살펴보기

 

 

 

 

 

SPA란?

 

 

To-do 앱 소개 및 JSX 알아보기

babel이 jsx를 일반 자바스크립트로 변형 시켜준다.

 

이것 이외에도 많은 문법 규칙이 있지만 다른건 실습을 하며 배운다

 

 

 

TO-Do 앱 만들기 시작

 

 

 

클래스 형으로 만든 컴포넌트 예시

할 일 목록 UI 만들기(JSX, CSS 작성)

 

리스트 스타일링에서 할일을 체크를 하면 줄이 그러져야 하므로 동적인 변화를 위해 함수로 작성.

 

 

 

 

 

 

MAP 메소드를 사용한 할 일 목록 나열

위 코드에서의 data파라미터는 객체 하나 하나 이다.

리액트에서 여러개를 나열할 때는 key라는 것을 사용해야한다.

 

JSX Key 속성 이해하기

index 사용 예시

 

 

 

Filter 메소드를 사용해서 할일 목록 지우기

 

 

 

 

 

 

 

 

React State란?

 

할일 목록 추가하기

 

 

 

 

전개 연산자(Spread Operator)

==> 객체 자체가 들어간다.

==> 객체 자체가 아닌 각각의 값이 할당됨

 

 

마무리된 일 표시하기(조건부 삼항 연산자)

이전 UI에서는 textDecoration이 None이었다.