bravo my life!

1. 개요 지식을 필요할 때만 여기저기서 검색하고 적용하다보니 머리속에서는 정리되지 않고 파편화가 되어있다. Context API 를 사용하기 위한 코드 작성법이 어떻게 되는지 알아보자. 2. Context API 사용의 흐름 초기 상태값의 작성 초기 상태값을 작성한다. (예: initialState) 더보기 // TodoContext.js const initialTodo = [ { id: 1, text: '프로젝트 생성하기', done: true }, ]; 리듀서 만들기 액션 타입, useReducer 를 작성한다. 더보기 // TodoContext.js // 초기 상태값 작성 const initialTodo = [ { id: 1, text: '프로젝트 생성하기', done: true }, ]; // ..

1. 개요 작동상 문제는 없지만 굉장히 거슬리는 부분이 있다. console.log를 출력하면 두번씩 출력이 되는데 해결해 보도록 하자. 2. 증상 console.log는 분명히 한 줄만 작성했는데도 출력은 두개가 나온다. 3. 해결 src/index.js 에서 만 남기고 를 지워준다. 정상적으로 한 번만 출력이 된다. 4. StrictMode 개발 모드에서 디버그를 하며 로 감싸져 있는 자손요소의 모든 부분을 검사한다고 한다.

1. 개요 참조타입을 복사할 때는 불변성을 지켜주며 복사를 하자. 2. 불변성 관리의 이유 리액트의 상태 업데이트와 관련이 있다. 리액트는 상태 업데이트를 통해 렌더링을 하게 되는데, 리얼돔과 버추얼돔을 비교하며 참조값이 바뀐 내용이 있다면 버추얼돔의 내용을 리얼돔에 반영하는 과정에서 리렌더링이 일어나게 된다. 리액트의 렌더링 과정은 1. 렌더 페이즈 - 버추얼돔과 리얼돔을 비교하는 단계 2. 커밋 페이즈 - 변경된 컴포넌트를 리얼돔에 적용하고 리렌더링을 하는 단계 로 이루어지는데 리액트는 버추얼돔과 리얼돔을 비교할 때 얕은 비교를 하게 되고 이 과정에서 참조값만을 비교하게 된다. 객체타입은 참조타입이라고 하는 만큼 얕은 복사시 참조값이 변경이 되기 때문에 불변성을 지키지 않는다면 원치 않는 리렌더링이 ..

React 숙련 주차의 시작 굉장히 힘든 한 주였다. 이해하지 못하고 넘어간 것이 왜 이렇게 많은지 불안한 마음뿐이다. 숙련주차의 과제로 나만의 단어장을 만들어야 했다. 처음으로 리덕스를 사용해 보았고 파이어스토어와 파이어베이스를 사용해 보았다. 리덕스는 후기를 남겨보고 싶은데 이해하지 못한 것이 너무 많아 차차 알아가며 정리할 생각이다. 지금은 내가 뭘 모르는지 뭘 아는지 모르는 상태이기 때문에 정리를 해도 소용이 없을 것 같다. 그나마 React훅 중 하나인 useRef를 아주 약간이나마 이해를 하고 사용해 본 것 같다. e.target.value()와 비슷한 용도로 사용하고 어딘가에 있는 값을 가져올 때 사용한다고 이해하고 있다. 이번 과제물이다. 아쉬운 점이 정말 많다. 삭제, 수정기능을 만들고 ..

React 기초 주차의 시작 말로만 듣던 React에 접근을 하게 되었다. React란 무엇이냐? 저번에도 말했듯이 웹을 만들때 편리하게 하기 위한 라이브러리라고 알고 있었고 배우기 쉽겠다고 생각했다. 그것은 굉장히 오만한 생각이었다. 기본이 되어있지 않은 상태에서 React를 만지는 것은 한국말 할 줄 안다고 국어학회에 나가는 꼴인 듯 했다. 자바스크립트에 대해 어느정도 지식이 있어야 했고 여러가지 내장함수나 지식들을 검색을 하며 빈 곳을 채워나갔다. 그 중 DOM이란 놈이 기억이 남는다. 아래 후술 하겠다. 과제는 내 일주일은? 이라는 평점 남기기 웹페이지이다. 언뜻보기엔 간단해보이지만 선뜻다가서기 힘들었다. 어떻게 접근을 해나가야 할 지 몰랐다. 이틀간 진행을 하지 못했고 불안하던 찰나 혼자끙끙대지..