10/31

클래스형 컴포넌트와 함수형 컴포넌트

컴포넌트 : 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈

리액트에서의 컴포넌트는 두 가지 종류가 있다

1. 클래스형 컴포넌트

• 리액트 초기 버젼에서 주로 사용했던 방식
  

2. 함수형 컴포넌트

• 현재 권장하는 방식
  

컴포넌트를 왜 쓰는가?
사실 return()하고 ()안에 쓰는 내용은.. main함수에 적는 것과 같은 느낌
우리가 다른 언어에서 main함수 안에 모든 내용을 작성하지 않고
함수를 나눠 작성하여 main에서 호출을 하듯이
리액트에서도 모든 내용을 return()안에서 작성하지 않고 컴포넌트를 따로 작성하여
호출을 해줄 수 있다. 그 과정에서 컴포넌트의 import와 export를 해주는 건 필수!

state 사용하기

• todolist라는 함수 컴포넌트 만들어서 일정관리하는 앱 레이아웃 만들어 볼 것

• state! -> react hook
  : 리액트에서 변수 대신 사용하는 것
  왜? : 데이터를 동적으로 감시하여 데이터가 변경되면 즉시 화면에 반영하겠다는..의미로 씀
  : 일반변수를 쓰면 상태관리가 안 되지만 state를 쓰면 상태관리가 됨

cf.) use로 시작하는.. 단어 : 거의 hook에 해당
-> useState : 상태관리 해줌

useState사용하고 바인딩해보기

구조 분해 할당 이해

state변수의 경우 직접 접근하여 변경할 경우 제대로 반영되지 않음. 그래서 따로 변경하는 함수를 두라고 권고함.

// 구조분해할당의 예시

데이터 반복 처리하기

체크박스 기능 추가

새로운 게시물 추가하기

시계 추가하기

게시물 삭제하기