리액트

# React 최적화 3 - useCallback 컴포넌트를 최적화하기 위해서 어떤 컴포넌트가 최적화 대상인지 찾아낼 수 있어야 한다 어떻게 찾아야 할까? React Developer Tools의 기능을 활용하자! Highlight updates when components render 기능을 체크해주면 화면에서 변경이 일어나는 컴포넌트에 테두리 색이 보이면서 어떤 컴포넌트가 렌더링 되고 있는 것인지 확인할 수 있다 일기 리스트를 삭제하면 DiaryEditor 컴포넌트도 렌더링 되고 있다 불필요한 렌더링이 발생하고 있기에 DiaryEditor 컴포넌트의 최적화가 필요하다! # DiaryEditor 컴포넌트 최적화 지난 시간에 배운 React.memo를 사용해서 최적화를 해보자 컴포넌트 코드가 길 때는 전..

오늘은 지난 강의에 이어 새로운 기능을 추가해보면서 리액트에 대해서 더 자세하게 배워보는 시간이다 API 호출과 최적화에 대한 강의가 진행되는데 오늘 강의도 열심히 꼼꼼하게 공부하고 기록해두어야겠다 그럼 오늘도 화이팅! # React에서 API 호출하기 useEffect를 이용하여 컴포넌트 Mount 시점에 API를 호출하고 해당 API의 결과값을 일기 데이터의 초기값으로 이용해보자 임시 API를 사용하기 위해서 jsonplaceholder 사이트를 이용한다 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Po..

오늘은 지난 시간에 이어 간단한 일기장 프로젝트의 추가 기능을 구현해보는 날이다 저번 시간에는 일기장의 틀만 구성했다면 오늘은 추가, 삭제, 수정 기능을 구현하고 Lifecycle을 제어하는 방법에 대해서 배워볼 것이다 CRUD는 모든 서비스에서 가장 기본적인 기능이기 때문에 오늘 강의를 잘 듣고 확실하게 배워두어야겠다 오늘도 그럼 화이팅! # React에서 배열 사용하기 2 - 데이터 추가 배열을 이용한 React의 List에 아이템을 동적으로 추가해보자 또한 React처럼 생각하는 방법을 배워보자 리액트로 프로젝트를 개발할 때 코드를 작성하는 것도 중요하지만 그 전에 컴포넌트 트리에 대해서 생각해보아야 한다 App 컴포넌트를 부모 컴포넌트로 하여 DiaryEditor 컴포넌트와 DiaryList 컴포..

이번주는 React를 사용해서 간단한 일기장 구현 프로젝트가 진행된다 일기장 기능에는 CRUD 가 전부 포함되어 있기 때문에 이번 간단한 프로젝트에서 확실하게 배우면 나중에 더 크고 복잡한 프로젝트를 할 때 도움이 될 수 있을 것이다 기본기를 탄탄하게 잡고 시작한다는 느낌으로 이번 강의도 열심히 듣고 따라하고 정리해보겠다 # 프로젝트 소개 간단한 일기장 프로젝트를 통해 React의 사용법을 배워보자 Point 1. 사용자 입력 및 배열 리스트 처리하기 Point 2. React Lifecycle과 API Point 3. React App 프로처럼 성능 최적화하기 with 도구 사용 Point 4. React 컴포넌트 트리에 전역 데이터 공급하기 # React 에서 사용자 입력 처리하기 npx create..

오늘은 2월의 시작이다 2월의 시작을 맞이하여 오늘부터 리액트 강의가 시작된다 옛날에 직접 구매해서 봤던 강의와 동일한 내용이라 복습하는 차원에서 기초부터 보면서 다시 한번 리액트의 개념에 대해 정리하고 간단한 토이 프로젝트를 만들어보려고 한다 2월도 화이팅! # React 소개 # React 란? 지금은 Meta가 된 Facebook이 개발한 오픈소스로 자바스크립트의 UI 라이브러리이다 즉, 자바스크립트를 알아야지 리액트를 쓸 수 있다 # Node.js란? 자바스크립트는 어떻게 실행될까? 브라우저에 내장되어 있는 자바스크립트 엔진을 이용하여 실행된다 하지만 브라우저들은 서로 다른 엔진을 사용한다 아래는 각 브라우저 별로 사용하는 내장 엔진의 종류이다 크롬 브라우저가 가진 v8이 가장 대표적인 자바스크립..