이정환 강사님의 강의 '한입 크기로 잘라먹는 리액트'를 수강하고 있습니다. Udemy에서 진행하고 있는 리액트 챌린지에 참여하며 3주차 미션으로 "섹션 6 React 기본 - 일기장 만들어보기"을 수강한 내용을 정리합니다. 👍 컴포넌트 최적화 React Developer tool 사용 > 개발자도구 > Component Tab ✅ Highlight updates when components render. : 리렌더링 되는 컴포넌트를 Highlight 👉 낭비되는 컴포넌트를 확인하자 - 현재 DiaryItem을 삭제할 때 DiaryEditor도 리렌더링 되는 중 → DiaryEditor가 불필요하게 리렌더링 되지 않도록 컴포넌트를 재사용하도록 수정하자! (함수형 컴포넌트의 내용이 길어질 때, 함수 전체를 ..

이정환 강사님의 강의 '한입 크기로 잘라먹는 리액트'를 수강하고 있습니다. Udemy에서 진행하고 있는 리액트 챌린지에 참여하며 3주차 미션으로 "섹션 6 React 기본 - 일기장 만들어보기"을 수강한 내용을 정리합니다. 👍 컴포넌트 재사용 > State의 변화로 부모 컴포넌트가 리렌더링 될 때, 해당 State를 사용하지 않는 컴포넌트는 리렌더링 하지 않게 하기 부모 컴포넌트에서 {count, text} 두가지의 State를 관리하고 있을 때, State에 변화가 생기면 부모 컴포넌트가 리렌더되고, 자식 컴포넌트들도 리렌더된다. 그런데, {text} State만 사용하는 컴포넌트의 경우 {count} State가 변화할 때도 불필요한 리렌더가 발생하게 된다. 👉 불필요한 렌더링을 막기 위해서 컴포넌트..

이정환 강사님의 강의 '한입 크기로 잘라먹는 리액트'를 수강하고 있습니다. Udemy에서 진행하고 있는 리액트 챌린지에 참여하며 3주차 미션으로 "섹션 6 React 기본 - 일기장 만들어보기"을 수강한 내용을 정리합니다. 👍 연산 결과값을 재사용하는 방법 > 현재 데이터에서 변화하지 않을 때 값을 다시 계산하지 않도록 하기 Memoization : 이미 계산 해 본 연산 결과를 기억해뒀다가 동일한 계산을 시키면, 다시 연산하지 않고 기억해둔 데이터를 반환하게 하는 방법 React 프로젝트에서 Memoization 활용 감정 점수로 기분이 좋은 일기와 나쁜 일기의 갯수, 비율을 계산하는 함수를 구현 출력결과 console을 확인해보면 getDiaryAnalysis() 가 여러번 호출된걸 확인 할 수 있다..

이정환 강사님의 강의 '한입 크기로 잘라먹는 리액트'를 수강하고 있습니다. Udemy에서 진행하고 있는 리액트 챌린지에 참여하며 3주차 미션으로 "섹션 6 React 기본 - 일기장 만들어보기"을 수강한 내용을 정리합니다. 👍 오늘의 목표 : useEffect를 사용하여 Mount 시점에 API를 호출, 결과값을 일기 데이터의 초기값으로 사용하기 1. jsonplaceholder에서 데이터 가져오기 (콘솔에 console.log(res); 로 출력하면 500개를 가져온 것을 확인할 수 있다.) 1. API를 호출하여 가져온 데이터를 일기 객체 데이터로 가공 1. async 키워드를 사용하여 API를 호출하는 비동기 함수를 선언한다. (jsonplaceholder 사용 : https://jsonplaceh..

이정환 강사님의 강의 '한입 크기로 잘라먹는 리액트'를 수강하고 있습니다. Udemy에서 진행하고 있는 리액트 챌린지에 참여하며 3주차 미션으로 "섹션 6 React 기본 - 일기장 만들어보기"을 수강한 내용을 정리합니다. 👍 LifeCycle = 생애주기 : 일반적으로 시간의 흐름에 따라, 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정 사람이 생애주기에 따라 행동과 욕구가 다르듯이! 프로그램도 실행과 종료까지 생명주기 SDLC를 갖는다. React 컴포넌트의 LifeCycle 탄생 → 변화 → 죽음 탄생 : 컴포넌트가 화면에 나타나는 것 Mount 변화 : 컴포넌트가 업데이트 (리렌더) Update 죽음 : 컴포넌트가 화면에서 사라짐 UnMount 컴포넌트의 LifeCycle을 제어? - 각 컴포넌..

이정환 강사님의 강의 '한입 크기로 잘라먹는 리액트'를 수강하고 있습니다. Udemy에서 진행하고 있는 리액트 챌린지에 참여하며 3주차 미션으로 "섹션 6 React 기본 - 일기장 만들어보기"을 수강한 내용을 정리합니다. 👍 리스트 렌더링(조회) 등록한 일기를 배열에 추가하면 지금까지 등록한 일기를 리스트로 만들어 화면에 렌더링 할 수 있다. 이러한 구조로 일기장 화면을 구현하려고 한다. DiaryEditor : 등록할 내용을 입력받는 컴포넌트 DiaryList : 등록된 일기 목록을 보여주는 컴포넌트 리스트 컴포넌트 만들기 App에서 DiaryList 컴포넌트를 생성할 때, 리스트로 렌더링할 배열 데이터를 Props로 전달 DiaryList 컴포넌트 > Props로 받은 객체 배열 바인딩 Props ..