React

React에서의 Props와 State에 대해 알아보자

State Lifting은 말 그대로 state를 위로 끌어올리는 것이다. 리액트에서 데이터 흐름은 부모에서 자식, 상위 컴포넌트에서 하위 컴포넌트로 props를 전달하는 하향식 단방향 흐름 원칙을 가진다.

styled-componenets 는 CSS In JS를 구현하는 아주 유명한 라이브러리임.

useEffect는 컴포넌트가 렌더링 될 때 side effect를 실행하도록 도와주는 Hook이다. side effect는 컴포넌트가 렌더링 된 후 비동기적으로 처리되어야 하는 작업들을 말한다.

useRef Hook에 대해 알아보자~!!!

리액트에서는 일반적으로 위에서 아래, 즉 부모에서 자식으로 props를 통해 데이터를 전달한다.그러나 앱이 커지고, 컴포넌트가 복잡해질 수록 전달해야 하는 props의 깊이는 더 깊어지고, 많은 컴포넌트를 거쳐야 데이터가 전달될 수 있다.

요약 - React.memo: 컴포넌트 자체를 메모이징 할 때 - useCallback: 함수를 메모이징 할 때 - useMemo: 값을 메모이징 할 때

Redux Redux란, 자바스크립트 애플리케이션의 전역 상태를 효율적으로 관리 할 수 있게 도와주는 라이브러리이다. 복잡한 상태 관리가 이루어지는 SPA에서 특히 유용하게 사용된다. Redux는 리액트가 뿐만 아니라 순수 Javascript에서도 사용 할 수 있다.

개인 과제의 피드백에서, 튜터님으로 부터 Nested Render Function는 지양하는 것이 좋다는 피드백을 받았다.

react-dom에서 제공하는 도구로, 자식 노드를 부모 그 바깥의 위치에서 렌더링 시킬 수 있다.

Redux Toolkit (줄여서 RTK 라고 한다.)은 기존 Redux 사용시 불편했던 점을 해결 하기위해 여러 추가 기능과 라이브러리를 탑재하여 나온 패키지이다.

Redux Thunk로 비동기 통신 하기

한 컴포넌트 안에서 state에 따라 다른 화면을 보여주는 기능을 만들던 중, 화면을 바꿔도 element가 바뀌지 않는 현상이 있었다.

React Query란? 리액트 쿼리는 리액트에서 서버 데이터를 불러오고, 캐싱하고, 동기화를 편리하게 해주는 라이브러리이다.

React-Router-Dom 라이브러리의 기능 중 하나로 loader라는 녀석이 있다.

30분만에 React에 Youtube API 적용해보기

페이지에서 상단으로 바로 이동할 수 있는 Top 버튼을 만들고 싶었다.

리액트에서 테트리스를 구현하기 위해 작업을 하던 중 블럭이 움직일 때 마다 깜빡임이 눈에 띄었다. 이 현상을 없애기 위해 구글링 중 useLayoutEffect에 대해 알게 되었고, 이를 통해 해결했다. useLayoutEffect란? 공식문서에서 정의한 한마디는 브

React로 프로그램을 작성하다보면 굳이 상태로 만들지 않아도 되는 값들을 useState를 이용하여 만드는 경우가 있다. 상태가 많아질수록 결국 리액트가 관리하는 포인트가 많아지게 되고, 불필요한 리렌더링을 초래할 가능성이 많아진다.

TDD는 어떤 특정 언어나 프레임워크에 종속된 단어가 아닌 개발 방식 중 하나이며 Test-Driven Development의 약자로, 테스트 주도 개발이라는 뜻이다.

React 19가 등장하며 새로운 Client Side Hooks들이 생겼다.useOptimistic, useFormStatus, useFormState과 use()라는 특이한 이름의 hook이다.

리액트의 가상 DOM과 실제 DOM의 비교, 리액트 컴포넌트가 렌더링 할지를 판단하는 방법, 변수나 함수의 메모이제이션 등 모든 작업은 자바스크립트의 동등 비교를 기반으로 한다.자바스크립트에서 값을 비교하기 위한 세가지 방법이 있다.== 연산자=== 연산자\[Objec

브라우저에서의 렌더링이란 HTML과 CSS를 기반으로 웹페이지에 필요한 UI를 그리는 과정을 말한다. 사용자에게 보여주는 정보를 그리는 과정인 만큼 무엇보다 중요하며, 성능에도 큰 영향을 미친다. 리액트의 렌더링은 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정

리액트가 최적화 하는 과정