리액트를 다루는 기술

프론트엔드 개발자가 되기 위해서 리액트 공부는 필수가 되었습니다. "리액트를 다루는 기술"이라는 책을 리액트 스터디를 통해 공부하면서 저의 입맛대로 정리하면서 공부해 보았습니다. 1. 리액트의 등장(왜 리액트인가?) 최근 몇 년간 전 세계 개발자는 자바스크립트에 뜨

먼저 리액트 코드를 이해해 봅시다 !!! src/App.js 파일을 열면 볼 수 있다. 여기서 import 구문이 사용됐다. 이는 특정 파일을 불러오는 것을 의미한다. 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용하여 다른 파일들을 불러와 사용할

리액트를 처음 배우면서 컴포넌트 설계의 중요성?과 프로젝트를 진행하다보니 왜 처음에 컴포넌트 설계가 중요한지 알게 되었다! 컴포넌트 설계를 자세히 배우기 전 컴포넌트에 대해서 먼저 배우고 가자! 리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용합니다

hooks는 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 라고 한다

책을 다 보고 적용해 보면서 알아가는 것이 많지만 다 적으면서 공부하려니깐 쉽지 않은 여정이었다... 하루에 7시간 넘게 정리만 하다니.. 지금부터는 중요하고 내가 나중에 생각 안 날 때 볼 수 있게 내 스타일 데로 정리해 보자!! 이 스타일이 안 맞으면 다시 돌아가

지금까지 배운 리액트 내용으로 미니 프로잭트를 만들어보자!!🔥🔥아직까지 리액트를 이용해서 어떻게 구상하고 코드를 작성해서 만들어야 하는지 항상 막막하지만! 이런 작은 것들을 만들어보면서 내가 원하는 것을 구현할 수 능력을 키워봅시다!! 모두 화이팅! 리액트를 설치를

이제 일정 관리 애플리케이션이 실제로 동작할 수 있도록 기능을 구현해 보자 !!! 🏋🏻 3. 기능 구현하기 3.1 App에서 todos 상태 사용하기 나중에 추가할 일정 항목에 대한 상태들은 모두 App 컴포넌트에서 관리. App에서 useState를 사용하여

일정관리 애플리케이션을 만들어 봤다. 현재까지는 이 애플리케이션을 사용할 때 불편함이 없다. 하지만 추가되어 있는 데이터가 무수히 많아 지면, 애플리케이션이 느려지는 것을 체감할 수 있다. 그래서 이번에는 컴포넌트 성능 최적화를 해보자! 1 많은 데이터 렌더링하기

immer란??? React에서 쉽게 불변성을 유지할 수 있는 코드 작성을 도와주는 라이브러리이다! 라이브러리는 특정 기능에 대한 도구 or 함수들을 모은 집합이다. 즉, 프로그래머가 개발하는데 필요한 것들을 모아둔 것이다.Library는 프로그래머라면 누구나 한번쯤은

웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미한다. 만약 자신이 애플리케이션을 만들 때 하나의 페이지로 충분한 것도 있지만, 블로그 같은 애플리케이션을 만든다면 여러 페이지가 필요할 것이다. 이렇게 여러 페이지