개념 정리본격적으로 렌더링에 대해서 보기 전에 렌더링과 관련된 리액트 패키지 4가지를 먼저 살펴보겠습니다. 패키지 구조React리액트 코어 패키지는 컴포넌트를 정의하는 역할만 합니다. 그리고 다른 패키지에 의존성이 없어서 다양한 플랫폼에 올려서 사용이 가능합니다. 그래서 화면을 그리는 패키지가 따로 있는데 그게 바로 렌더러 패키지 입니다.Renderer렌더러는 저희한테 익숙한 리액트-돔과 모바일에서 사용하는 네이티브 렌더러 등이 있고 호스트 렌더링 환경, 그러니까 플랫폼에 의존적입니다. 이렇게 렌더러가 다양하기 때문에 리액트가 그려질 수 있는 플랫폼 환경이 다양합니다. 즉 렌더러의 역할은 브라우저나 모바일 같은 호스트와 리액트를 연결하는 그런 역할을 합니다.Scheduler스케줄러는 이름 그대로 스케줄링..

v13 컴포넌트 수준에서 렌더링 환경을 선택 💡 next 13 이전에는 페이지에 필요한 모든 JS 코드를 하이드레이션 했지만 서버 컴포넌트가 도입된 후에는 클라이언트 컴포넌트만 하이드레이션 하면 된다. → JS 번들의 사이즈가 줄어든다. 📌 클라이언트 컴포넌트 클라이언트 컴포넌트를 사용하면 애플리케이션에 클라이언트 측 인터랙션을 추가할 수 있다. 서버에서 미리 렌더링 되고 클라이언트에서 hydrated 된다. 클라이언트 컴포넌트는 기존의 페이지 라우터의 컴포넌트가 항상 작동하던 방식이다. 작동방식 next.js가 빌드 중에 컴포넌트를 하나씩 확인하다가 클라이언트 컴포넌트를 만남 정적으로 만들 수 있는 부분을 확인 → 정적 HTML 프리렌더링 빌드 시에 클라이언트 컴포넌트도 프리렌더링 되기 때문에 내부의 ..

React에서 상태(state)는 컴포넌트의 라이프사이클 동안 정보를 유지하는데 사용되는 중요한 개념입니다. useState 훅을 이용하여 컴포넌트의 상태를 관리하면, 상태가 변경될 때마다 컴포넌트가 다시 렌더링 됩니다. 그런데, 상황에 따라서 컴포넌트의 상태가 유지되거나 초기화되는 경우가 있는데, 이는 컴포넌트가 렌더링 되는 방식에 따라 달라집니다.삼항 연산자(? :)와 논리 연산자(&&)를 이용하여 컴포넌트를 렌더링 하는 경우, 두 연산자가 UI 트리(가상 DOM)에 미치는 영향은 서로 다릅니다. 이로 인해 React의 diffing 알고리즘이 컴포넌트를 다르게 인식하고 처리하며, 결론적으로 컴포넌트의 상태 유지에서 차이가 나게 됩니다.삼항 연산자와 컴포넌트의 상태삼항 연산자를 사용하면, 두 표현식 ..

기존에 styled-components의 ThemeProvider로 다크모드를 구현하고 있었는데, 토글 버튼에 setTheme 함수를 직접 전달해주다 보니 props drilling이 우려되고 추상화도 잘 되지 않아서 코드가 지저분해 보였기 때문에 리팩터링을 하려고 마음먹었다. theme의 상태를 관리하기 위해서 보통 전역 상태 라이브러리를 많이 사용하지만, 현재 개인 프로젝트에서 전역으로 관리할 상태가 theme 밖에 없어서 패키지를 설치하지 않고 가볍게 사용할 수 있는 걸 찾으려고 했다. 처음엔 URI 쿼리 스트링으로 상태를 관리하는 방법을 생각했다. 하지만 유저가 URI를 직접 수정할 수 있어서 예기치 않은 변경이 발생할 수 있고, URI가 변경될 때마다 브라우저 히스토리가 쌓여서 히스토리가 불필요..

문제 설명 머쓱이는 태어난 지 11개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음과 네 가지 발음을 조합해서 만들 수 있는 발음밖에 하지 못하고 연속해서 같은 발음을 하는 것을 어려워합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ babbling의 길이 ≤ 100 1 ≤ babbling[i]의 길이 ≤ 30 문자열은 알파벳 소문자로만 이루어져 있습니다. 입출력 예 babbling result ["aya", "yee", "u", "maa"] 1 ["ayaye", "uuu", "yeye", "yemawoo", "ayaay..