22.12.07)react과제를 한 28일차

#오늘 배운것

 

과제 진행

• 제목과 내용을 입력하고, [추가하기] 버튼을 클릭하면 Working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 구성해주세요. [수행 완료]

• Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을 취소, isDone이 false 이면 라벨을 완료 로 조건부 렌더링 해주세요. 위 영상을 보면 버튼 내 라벨이 다른 걸 볼 수 있죠? [실패]
• Todo의 상태가 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현합니다.[실패]
• Layout의 최대 넓이는 1200px, 최소 넓이는 800px로 제한하고, 전체 화면의 가운데로 정렬해주세요[수행 완료]
• 아래 이미지의 폴더 구조와 동일하게 구현하고 컴포넌트 구성도 똑같이 나눠서 구현해주세요.[실패]

 

 

 yarn create react-app 파일명 :react 프로젝트를 셋팅해준다.

react버전이 올라가면서 improt "react"를 쓰지 않아도 되지만...혹시 모르니까 써두자..

return문은 jsx문법이니까 class <=>className같은게 조금씩 다르다.

props : 부모컴포넌트에 자식컴포넌트 데이터를 넘겨주는것

jsx와 js차이는 ? react만의 컴포넌트가 들어간다면 jsx로 하면 좋다.

if props를 ({name})으로 쓴다면 =>그래도 james가 출력. 다만 헷갈린다면 props를 써도 좋다.

리액트 렌더링 하는 기준 -> props변경, state값이 바뀔 때(usestate를 통해)

state = 변경할 값 , setState = state값을 바꿀 때 쓰는 것(state는 직접 못 바꾸니까...)setState값을 통해 변경한다.setState()

childeren이 없으면 <input />으로만 표기해도 됨!!!

 

 

 

다른분이 하신 과제...[참고하기]

todoform

button

완료,취소버튼

working,done부분

 

 

 

....어렵다....