본문 바로가기

ContextAPI

[React] 투두리스트 웹 만들기3 에러가 난 원인이 components에 있는 TodoContext함수를 인식을 못해서 였는데 폴더 이름과 함수 이름을 바꿔 보아도 해결되지 않아서 TodoContext함수만 따로 빼주었습니다. + 버튼을 누르면 45도 회전시켜서 X버튼으로 보이게 하고 할일을 입력할 수 있는 인풋 창이 생성됩니다. 여기서 처음 알게 된 것은 box-sizing: border-box; 라는 css 속성인데 border-box로 설정하면 요소의 width 값은 '콘텐츠 크기 + 좌우 padding 값 + 좌우 border 값'으로 계산되는 것입니다. width: 100%; 즉 width값이 100%이기 때문에 요소의 크기와 width 값이 동일하게 적용됩니다. 이제 UI 부분은 모두 구현된 것 같고 기능을 구현해 보도록 하겠.. 더보기
[React] 투두리스트 웹 만들기 2 기능을 구현하려면 여러 상태들을 관리해야하는데 보통은 useState로 부모 클래스에서 관리하곤 합니다. 이번에는 ContextAPI를 이용해서 보다 깔끔하게 상태를 관리해 보겠습니다. (벨로퍼트님의 강좌를 참고하였습니다.) TodoContext라는 파일을 하나 만들어 주고 useReducer를 사용해서 상태를 관리해 줍니다. import React, { useReducer, createContext, useContext } from 'react'; const initialTodos = [ { id: 1, text: '프로젝트 생성하기', done: true }, { id: 2, text: '컴포넌트 스타일링하기', done: true }, { id: 3, text: 'Context 만들기', done:.. 더보기