Jerry

리액트에 대해서 공부하는 사람이라면 대부분 듣거나 알고 있을 개념인 Props Drilling에 대해서 공부하는 도중..Props Drilling에 대한 해결책으로 여러 라이브러리나 리액트 내부 기능이 존재했다. 리액트에서 제공하는 상태 관리 기능은 Context API이 존재하고,상태 관리 라이브러리에는 Redux, Zustand, Recoil, Jotai 같은 것들이 대표적으로 있다.거의 모든 상태관리 라이브러리들은 이 api를 기반으로 개발되었다고 한다. 먼저, Props Drilling에 대해 알아보았다.기존에 상태 관리하는 기능이나 라이브러리가 없었던 시절(?), 컴포넌트 간에 상태를 공유하기 위해 Prop을 여러 계층을 통해 전달하는 것이 일반적이었다. 즉, Props Drilling은  상위..

이번에는 '리렌더링이 되는 조건'이라는 주제에 대해서 이야기해보려고 한다. 리렌더링 되는 조건 이란 무슨 뜻일까? 요 며칠간 리액트에 관해 공부하고 있어서 그나마 쉽게 정리를 하지 않을까 싶었지만 리렌더링에 대한 의미에 대해 생각해보니 단순하게 입으로 리렌더링이란 말을 썼지 이 용어 의미하는 바를 제대로 모르고 있었고 NaverD2에 있는 이 글을 보고 이해해볼 수 있을까했는데... D2에 있는 글은 열심히!! 읽어봤지만 필자에겐 아직 어려웠다... 다른 레퍼런스를 참고해 리렌더링에 대해 알아보려고 한다! 가즈아!! 포기하지마!!! 그렇다면 먼저! 렌더링에 대해서 알아보자! 1. 사용자 화면에 View(내용)를 보여 주는 것을 렌더링이라고 한다. 2. React 엘리먼트를 루트 DOM 노드에 렌더링 하려..

필자는 현재 코드스테이츠 Immersive 수료 후에 취업 준비 과정 중에 있다. 취업 준비 과정에서 리액트에 다시 개념 공부도 하고 있기도 하고 스터디원들과 기술 면접 리스트를 가지고 준비하는 과정에서 이번에 "리액트 최적화"라는 주제가 내 눈길을 사로잡아 이번 기회로 잘 정리해보려고 한다. 이번 주제와 관련해서 공식 문서와 여러 잘 정리된 블로그 글들을 보고 너튜브 영상도 찾아서 보았다. 참고한 자료들을 나름 집대성해보려고 했으나 양이 비대해지는 걸 막지 못해 핵심적인 부분 위주로 구성을 해보았다. 각 내용의 자세한 내용들을 참고한 자료의 출처에 대한 내용들을 보시면 더 이해가 잘 될 것이다. 만약, 한 번 보고 이해가 안 가신다면 그건 당연하다고(?) 말씀드리고 싶고 꼭 필자의 글만 볼 필요 없고 ..

Achievement Goals React 기본 React를 이용한 컴포넌트 단위 개발의 장점을 이해할 수 있다. 요즘 웹페이지는 유저와 많은 interaction이 일어나(ex. button) 수많은 상태 관리가 필요하다. 돔 관리와 상태 관리 말고 기능 구현에 집중하고 싶은 욕구가 있었고, React, Angular, Vue가 탄생했다. 리액트는 component (하나의 의미를 가진 독립적인 단위 모듈) 개념에 집중하고 있는 라이브러리다. 직관적과 재사용성이 증가한다. JSX와 같이 선언적인 형태의 문법을 사용하는 것의 장점을 이해할 수 있다. 리액트는 기본적으로 ES6를 사용한다. Destructuring, Spread operator, rest parameters, default paramete..

웹, 데스크톱, 모바일 등 다양한 플랫폼에서 활용할 수 있는 프론트엔드 라이브러리. 이전에 나는 페이지 단위의 DOM 개발을 다뤘다면, 이제는 컴포넌트 단위의 개발을 다룬다. React React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. React 리액트는 유저 인터페이스(Ui)를 빌딩하기에 선언적, 효율적이며 유연한 자바스크립트 라이브러리다. 리액트는 컴포넌트라고 불리는 작고 독립된 코드 조각들을 가지고 복잡한 UI들을 ..