#layout

nextjs 서버컴포넌트 질문있습니다 !

안녕하세요 nextjs 14 app router 공부 중 질문이있어 이렇게 글 남깁니다.... 1. ”use client“ 클라이언트 컴포넌트가 자식으로 서버컴포넌트를 가져오면 그 아래의 모든 컴포넌트는 서버컴포넌트로 동작이 아닌 클라이언트 컴포넌트가 되는건지 궁금합니다.. 2. 그렇다면 layout단에서 use client를 사용한 provider가 있다면 children으로 받은 모든 페이지들은 클라이언트 컴포넌트가 되는건지 궁금합니다... 3. 서버컴포넌트랑 SSR이 다른 개념이라는데 너무 헷갈립니다.. 혹시 다른점이 뭔지 알 수 있을까요? 궁금한 점들을 나열하다보니 두서가 없어진거같아서 죄송합니다.. 좋은 히루 보내세요 :) !!!!

Next.js 코드 가독성..

안녕하세요 프론트앤드 1년차에 다가가고 있는 신입 개발자입니다. 현재 Next14를 사용하고 있으며 코드의 가독성, 효율성을 많이 고려하면서 코드를 짜려고하는데 너무 고민이 되네요 저보다 앞서서 달려가고 있는 개발자 선배님의 생각을 듣고싶습니다 ㅠㅠ... 2가지가 궁금합니다. 먼저 첫번째 이미지처럼 Version에 관련된 파일을 저렇게 분리했을 때 저는 Version의 최상위 Layout.tsx에서 모든 것을 선언하기가.. 너무 오히려 가독성이 안좋다고 생각을 하고 있습니다 즉, 변수나 함수를 모두 최상위 Layout.tsx에서 선언 및 정의를 해두고 props로 내려주는게 이상하다고 생각을 합니다. 변수, 함수, useEffect 모두 직접 해당 변수나 함수를 컨트롤하는 부분에서 선언 및 가공을 하는게 맞다고 생각을 합니다. 최상위 Layout.tsx가 너무 무거우면 오히려 나는 VersionDataTable에 관련된 변수나 함수만 보려고 하였으나 최상위 Layout.tsx를 보고 아 이게 VersionDataTable에 필요하구나 뭐가 필요없구나, useEffect의 의존성 배열까지 고려하는것이 불필요하다고 생각을 하고 있습니다.. 근데 같이 프론트 앤드 개발하시는 분께서는 '단기적으로 절대 코드가 변하지 않는다고 생각하면 그 말씀이 맞는데 그건 아니잖아요? 우리는 계속 유지보수를 할거고 그러면 결과적으로 A에서만 사용하던 변수나 함수들을 A,B,C에서 같이 사용할 수 있게 변경하게 되면 그때 변경하면 유지보수 측면에서 너무 안좋습니다. 최상위에 모두 선언이나 정의를 해두고 props로 내려주는게 맞다 이런 형식으로 코드를 작성하면 몇개월 뒤에 코드를 수정할 때 A가서 수정했다가 C가서 수정했다가 D가서 수정하실 거에요? 바로 알아보실 수 있겠어요?' 라고 말씀을 하시더라구요.. 물론 몇개월 뒤에 코드를 보거나 하면 제가 작성한 코드인데도 저는 헷갈리는 경우가 많습니다. 그러나 최상위에 모두 선언 및 정의해둬도 마찬가지 아닌가..? 유지보수 측면에서 뭐가 안좋은거지..? 라고 생각되게 됩니다.. 선배님의 말씀을 따라가고는 싶은데 이해가 안돼서요 제가 아직 기본기가 많이 부족한 상황이라 이 상황에서 말씀드리면 이론부터 말하며 설득시키기가 부족하다고 생각하기 때문에 말씀드리면 오히려 '저는 이렇게 생각해요 틀렸는데요?' 라고 말하는 것 같아 말다툼이 될 것 같습니다. 2. 밑 사진을 보면 modalTemplate라는 폴더, ConfirmTemplate이라는 폴더가 존재하는데요 이것에 대해서 저는 사용하는 용도에 따라서 Create면 Create Create와 Update를 동시에 할 수 있는거면 BundleCreateAndUpdate 이런 형식으로 각각의 파일을 생성을 하고 문법상 공유되는 부분은 중복이 되어서 실제로 보여주는 부분을 영역으로 나눠서 BasicOptions, SelectList, VersionDetail, VersionOptions로 나누고 각각의 파일에서 사용하는 부분만 불러와서 쓰는 형식으로 코드를 작성했습니다. 그러나 이렇게 용도에 따라 구분하지 않고 최상위 Layout.tsx파일 하나만 만들고 ModalType이라는 props를 받아서 ModalType이 create, update, create&update, delete ... 등 JSX에서 삼항 연산자를 써서 처리를 할수도 있습니다. 저는 ModalType으로 처음에 구분하다보니 나는 'create' 속성일 때 어떤 형식으로 되는지 코드로 보고싶은데.. 그러면 너무 뜯어서 봐야하더라구요 그래서 용도에 맞게 파일을 만들고 거기서 form을 불러오기만해서 중복 코드를 줄이는 방식을 택했습니다.. (더 나은 코드라고 생각했습니다.) 그랬지만 선배님께서 'ModalType으로 나누는게 더 좋아요 저렇게 지으면 가독성이 너무 떨어지고 파일의 이름이 너무 길어지잖아요 이상하지 않나요?' 라고 말씀을 하시더라구요... 물론 가독성은 사람마다 다른거 알고있습니다. 그러나 ModalType으로 나누기 시작하면 한도 끝도없이 나누고 ModalType이 delete일 때만 사용하는 함수, create일 때만 사용하는 함수 등 필요없는 함수도 너무 많아져서 용도에 맞게 파일을 구분하고 거기서 중복 코드만 최대한 줄이자! 라고 생각하여 코드를 작성했는데 이 내용도 말씀드려 봤지만 '가독성' 이라는 이유 하나만으로 너무 안좋다고 합니다.. 진짜 안좋은건가요..? Next 도 그렇고 프론트 앤드 너무 어렵습니다..

data fetching은 어디서 하는 게 좋은 것일까요?

안녕하세요. 저는 프론트엔드 개발자가 되기 위해 공부중인 취준생입니다. 피드백을 적극 환영하기에 많은 피드백 혹은 의견을 많이 남겨주시면 감사하겠습니다. 저는 데이터 페칭을 어디서 하는 게 좋을지 고민 중이라 글을 남깁니다. 아래와 같이 3개로 글을 구성해봤습니다. 1. 현재 개발상황 2. 현재 저의 데이터 페칭 위치 3. 궁금한 점 1. 현재 개발상황 저는 개인 프로젝트로 Next.js와 React Query를 사용하여 개발하고 있습니다. 현재 Next.js의 App Router를 사용 중이며, 프로젝트 구조는 아래와 같습니다. app: page.tsx, layout.tsx components: 최소 2번 반복 사용되는 재사용 가능한 컴포넌트 container: 일반적인 컴포넌트 (조합 등) hook, service 등 2. 현재 저의 데이터 페칭 위치 현재 데이터 페칭은 최상단의 app -> page.tsx에서 수행하고 있으며, 자식 컴포넌트에는 데이터를 props로 전달하고 있습니다. 이러한 이유는 prop drilling이 발생하더라도 데이터 페칭을 한 곳에서 처리하면 코드 이해가 쉬울 것 같아서입니다. 현재로서는 전역 상태 라이브러리를 사용하지 않아 최대 4단계까지 prop drilling이 발생하고 있지만, 전역 상태 라이브러리를 도입하면 prop drilling 문제는 해결될 것으로 생각하고 있습니다. 추가적으로 현재 이렇게 구현하면서 data fetch할때 필요한 query값들도 최상단에서 관리해야하는 불편함이 있었습니다. -> 최상단에서 관리해야 하는 상태값이 늘어남 3. 궁금한 점 3-1. 아래의 2가지 data fetching 방법 중 어느것이 적절한지? 합리적인지 의견이 궁금합니다. - 최상단에서 Fetching - 장점 : 한 곳에서 Fetching하기에 코드 일관성, 가독성, 코드를 이해하는데 좋다고 생각 - 단점 : prop drilling, 추가적인 전역 상태 관리 해야한다고 생각 - 필요한 컴포넌트에서 Fetching - 장점 : 필요한 컴포넌트에서 fetching 하기에 prop driling과 같은 불필요한 코드 작성 할 필요 x - 단점 : 어떤 컴포넌트에서 fetching 했는지 파악하기 힘들어짐 3-2. 현재 최상단에서 모든 데이터 페칭을 하고 props로 전달하는 방식 vs 필요한 컴포넌트에서 데이터 페칭을 하는 두 가지 방식 중 어느 것이 더 많이 사용되는 패턴인지 궁금합니다. 3-3. React Query는 서버 상태 관리, 캐싱, Optimistic Update와 같은 기능을 위해 도입했습니다. 그러나 prop drilling을 해결하기 위해 React Query에서 가져온 서버 데이터를 전역 상태 라이브러리에 담게 되면 서버와 클라이언트 상태를 구분하는 의미가 없어지는 것 같다는 생각이 듭니다. 제가 잘못 사용하고 있는것인지 궁금합니다.

next.js에서 히스토리 탭 기능 구현

next.js를 사용해서 브라우저에 탭 기능을 사이트 내에서 구현해야 하는 상황입니다. 탭 기능에 추가로 페이지 내부에서 다른 페이지로 가는 링크를 클릭하면 탭 목록에 추가되어야 하고 기존에 있던 탭에 보이던 페이지는 상태가 유지되어야 합니다. 지금 구현한 방법은 미리 모든 페이지의 페이지 컴포넌트를 하나의 파일에 넣어두고 링크를 클릭하면 store에 해당 페이지의 데이터를 넣어주고 Layout 컴포넌트에서 router.path를 비교해서 show/hide을 결정해주고 있는데 뭔가 다른 방식이 없을까요?

NextJS 14 project 시작 단계에서 에러가 발생했어요... 최대한 빠른 답변 부탁드립니다.

npx create-next-app 라는 명령어로 프로젝트를 시작했는데요. 아무것도 건들이지 않은 상태에서 app/layout.tsx 파일을 클릭했는데 맨 위에 에러가 발생해져 있더라구요.. 내용을 보니깐 Parsing error: __classPrivateFieldGet(...).at is not a function eslint 이런 에러가 있고 해당 에러가 tailwindcss.config.ts 파일 맨 윗줄에도 발생해져 있습니다. 어떻게 해야하는 건가요..?

Next JS 14 쿠키 관련 질문입니다.

현재 NextJS 14 버전을 사용 중에 있으며 App Router로 폴더 구성을 하고 로그인 작업을 진행 중에 있으며, 로그인 프로세스는 다음과 같습니다. 1. 프론트엔드 : 사용자가 로그인 버튼 클릭 2. 디스코드 서비스에서 인증 (디스코드 페이지로 이동) 3. 백엔드 서버로 인증코드 전송 4. 백엔드 서버에서 프론트엔드로 리다이렉트 (이 때 쿠키로 엑세스 토큰과 같은 정보를 보내줌) 쿠키 설정도 https에 백엔드랑 같은 도메인으로 맞춰 줬습니다. 여기서 1~4번까지 에러 없이 잘 동작하고, 쿠키도 브라우저에 잘 저장되고 있습니다. 근데 여기서 한 가지 문제가 발생했는데, Nexjs가 서버 사이드 컴포넌트(layout) 에서는 쿠키를 잘 불러오고 있지만 클라이언트 사이드 컴포넌트(page) 에서는 쿠키를 불러올 수 없었습니다. (undefined) 현재 클라이언트 사이드 컴포넌트에는 최 상위에 'use client' 를 붙혀 잘 사용하고 있고, cookies-next 라는 라이브러리로 불러오고 있습니다. 어떤 것이 문제일까요? 문제의 원인과 해결 방법을 알고 싶습니다.

리액트 바디의 높이가 content fit일때 데이터 로딩중의 화면

안녕하세요 6개월차 프론트엔드 주니어 개발자입니다. 궁금한 부분을 뭐라고 구글링해야될지 모르겠어서 제목도 애매한데 제가 궁금한 부분은 페이지에 헤더 내용에 따라 높이가 다른 바디 푸터 가 있는데 바디의 내용을 불러오는 시간이 매우 짧다면 잠깐 사이에 푸터가 깜빡거리면서 노출되었다가 컨텐츠가 생기면서 아래로 밀려나며 안보이게 되는 부분이 깜빡임처럼 보여서 고치고 싶기 때문입니다. 바디의 내용이 항상 같은 사이즈라면 고정 div를 두고 로딩중일땐 그 div를 노출시키는 조건문을 생각해봤는데(유튜브앱에서 댓글창이 로딩중일때 일정 레이아웃을 잡고 빈 공간인것처럼요) 지금 페이지에도 isLoading값을 가져와서 아무것도 없는 높이가 큰 div를 보였다가 데이터가 오면 보이도록 적용해보았는데 이렇게 하면 내용이 몇줄 안될때, 로딩중일때는 큰 div에 밀려 footer가 안보이다가 내용이 로딩되면 내용의 길이가 짧아 footer가 다시 보이는 부분으로 올라와서 깜빡임처럼 보인다는점 입니다. 깜빡임 등의 키워드로 검색하면 useLayoutEffect나 이미지 lazy loading 등의 정보만 있어서 제가 원하는 부분과는 다른것같습니다. 해당 조언을 구할 사수가 따로 없고 구글링이나 gpt에도 설명할 키워드가 부족해 이렇게 질문 남깁니다. 현업에서는 이런 조건일때 어떻게 예외처리를 하는지 궁금합니다. (현재 프로젝트에서 스피너를 따로 사용중이지 않아서 더 깜빡임처럼 보입니다.)

nextjs에서 랜더링 시점 바꾸기

안녕하세요! nextjs 프로젝트 진행중에 궁금증이 생겼습니다. 현재 Sidebar 컴포넌트에서 카카오맵이 불러와져야 작업을 할 수 있는 상태입니다. 카카오 맵은 children 에서 랜더링되기 때문에 아래와 같이 코드작성시, Sidebar 랜더링 시점에 kakao is not defined 라는 오류가 뜹니다. 혹시 Sidebar를 좀 늦게 랜더링 할 수 있을까요? export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body className={inter.className}> <div id="login-modal" /> <section className="flex h-screen"> <nav className=" h-full bg-slate-100"> <Sidebar /> </nav> {children} </section> </body> <Script src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${APIKEY}&libraries=services,clusterer`} strategy="beforeInteractive" /> </html> ); }

Nuxt header asyncdata 질문

Nuxt에서 header에 들어갈 메뉴를 ssr로 하고 싶어서 asyncdata에서 구현하려고 했더니 Header가 layout 이라서 안되더군요 Header에서 메뉴 리스트 서버에서 가져올 때 시점을 ssr로 해야 되나요? csr으로 해야 되나요?

Next.js App router + recoil 적용 방법에 질문이있습니다.

next.js 에 recoil 을 적용하려하니 RecoilRoot 컴포넌트로 감싸줘야하는 부분에서 어려움이 생겼습니다. RecoilRoot 는 react.createContext를 쓰기에 클라이언트 컴포넌트에서 사용해야 한다는 것인데 이를 위해 RecoilRoot만을 return 하는 클라이언트 컴포넌트를 만들고 root layout 에서 불러와 그것으로 children을 감싸주면 된다는 것이였습니다. https://velog.io/@pakxe/Next.js-Recoil%EC%9D%84-Next.js-%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0%EA%B3%BC-children-prop-pattern 위 블로그의 마지막 하단을 보면 ``` // ./app/layout.tsx // 보이는 코드 <RecoilRoot> {children} </RecoilRoot> // 실제 코드 <RecoilRoot children={<Home/>}/> ``` 처럼 동작하기에 RecoilRoot 클라이언트 컴포넌트 하위에 서버 컴포넌트 들이 들어가는게 아니라 RecoilRoot 와 chilren 이 같은 부모를 두고 서로 부모자식 관계가 아니니 클라이언트 컴포넌트 하위에 서버 컴포넌트가 들어가는 것이 아니다 라고 하는데 이 부분이 이해하기 어려워서요... 실제코드 부분을 보면 RecolRoot 가 children 이라는 컴포넌트를 파라미터로 받기에 파라미터로 받는 과정에서 이미 렌더링이 되어 넘어가기에 Recoil Root는 서버 컴포넌트인 children이 렌더링된 상태에서 파라미터로 받아 서버 컴포넌트가 클라이언트 컴포넌트 하위에서 렌더링 되는 것이 아니다.. 가 맞는 것인지 궁금합니다.

Next.js app router 다크모드 깜빡 거림 문제

혹시 next app router에서 다크모드 설정 깜빡거리는 현상 해결해 보신 분 계신가요? 테마는 로컬스토리지에 저장해서 초기에 보여줍니다. Next 14 + styled-components 사용중입니다. 기존 page router에서는 _document.tsx에서 script 태그 dangerouslySetInnerHTML 사용해서 DOM요소 렌더링 이전에 로컬스토리지 저장된 모드 가져와서 관련 코드 실행 되게 끔 해서 깜빡임 현상을 해결했었습니다. app router에서 layout.tsx에 Script태그 이용해서 똑같이 적용하면 DOM요소가 렌더링 되고나서 실행이 되어서 기존 다크모드설정 후 새로고침 시 깜빡거리는 문제가 발생합니다ㅠㅠ 기존에 _document.tsx랑_app.tsx에 작성된 코드들은 layout.tsx에서 관리하는 걸로 알고 있는데 동작 방식이 다른 건지 기존과 다르게 동작합니다.. 여러 옵션을 사용해봐도 똑같네요... 관련 자료도 너무 없어서 nextjs github issue 뒤져보니까 똑같지는 않지만 비슷한 문제를 겪고 있는 issue가 있던데 해결이 안 된 거 같더라구요.. 이러한 상황에는 어떻게 해야할까요..? 개인 프로젝트고 해결이 된다면 정말 좋겠는데, 면접에서 이렇게 해결하지 못한 상황에 대해서는 어떻게 말해야할지도 고민입니다..

Next.js에서 React Portal을 잘못 적용한건지 궁금합니다.

안녕하세요! next.js에서 모달 구현을 위해 react portal을 사용하였습니다. 그런데 제가 의도한 것과 다른 결과가 나와 코드를 잘못 작성한건지, 제가 portal에 대해 이해를 잘못 하고 있는건지 궁금해 질문드립니다. 현재 next.js 14.0.4 + tailwind 환경에서 작업하고 있습니다. // src/app/layout.tsx (사진1 첨부) // src/components/modal/ Modal.tsx (사진2 첨부) // 실제 출력 화면 (사진3 첨부) portal을 사용하면 같은 body 태그안에 있는 형제 컴포넌트의 z-index의 영향을 받지 않는다고 알고 있는데, 첨부한 사진과 같이 <body> 안 형제 컴포넌트 하위에 위치한 컴포넌트의 z-index의 영향을 받고 있습니다. portal로 출력할 부분을 children으로도 받아보고, 포탈 컴포넌트 안에서도 작성해보고 했는데 모두 동일한 결과가 출력됩니다. 포탈 컴포넌트에도 z-index를 적용해줘야 하는건지, 제가 코드를 잘못 작성한건지 알고 싶습니다. 감사합니다!

Nextjs app router 사용시 multiple layout은 보통 어떻게 구성하시나요?

예를들어서 헤더와 사이드바가 있을 때 루트 레이아웃에 헤더와 사이드바를 구성해두면 다른 페이지에서 추가 작성하거나 관리할 필요가 없어서 편리할거 같긴합니다. 하지만 로그인 페이지나 회원가입 페이지에선 사이드바가 필요가 없는 상황일 경우 레이아웃 구성을 어떻게 하는게 좋을까요? 1. 루트 레이아웃엔 최소한의 구성만 하고 개별 페이지 레이아웃에 추가 구성을 한다. 2. 그외의 다른 방법 추천 부탁드립니다.

(SSR 새로고침 문제)NextJS page에서 redux persist gate 설정하면 Client컴포넌트로 인식되는 문제

NextJS Pages Router에서 유저 데이터를 상태관리하기위해 redux를 사용했으나, 새로고침 시 데이터가 날라가는 문제를 해결하기 위해 persist gate를 사용했습니다. 하지만 redux persist gate를 사용하면 클라이언트 컴포넌트로 인지되는 문제가 있습니다. 궁금한 것 1) persist gate를 잘못써서 생긴 문제일까요? 아님 persist gate를 쓰면 안될까요? 2) 해결 방법으로 생각 해본 것은, "persist gate를 사용하지 않고 매 새로고침 시 저장되어있는 local storage에서 데이터를 새로 가져온다." 입니다. 3) ssr시 상태관리 새로고침 다른 방법으로 해결해본 경험 있으시면 아무렇게나 대답해주시면 감사하겠습니다!!! ----------------------------------------------- 문제의 코드 위치: https://github.com/bbookng/zippyziggy-v2/blob/main/frontend/zippy-ziggy/src/pages/_app.tsx 문제의 코드: import GlobalStyle from '@/styles/Global.style'; import useDarkMode from '@/hooks/useDarkMode'; import { media } from '@/styles/media'; import { darkTheme, lightTheme } from '@/styles/theme'; import type { AppProps } from 'next/app'; import { ThemeProvider, createGlobalStyle } from 'styled-components'; import normalize from 'styled-normalize'; import '@/styles/index.css'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import AppLayout from '@/layout/AppLayout'; import store, { persistor } from '@/core/store'; import { PersistGate } from 'redux-persist/integration/react'; import { Provider } from 'react-redux'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import 'toastify-js/src/toastify.css'; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import DefaultHead from '@/components/Head/DefaultHead'; import Construction from './construction'; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, // default: true }, }, }); function App({ Component, pageProps }: AppProps) { const { colorTheme, toggleTheme } = useDarkMode(); return ( <Provider store={store}> <PersistGate persistor={persistor}> <QueryClientProvider client={queryClient}> <ThemeProvider theme={colorTheme === 'dark' ? darkTheme : lightTheme}> <AppLayout toggleTheme={toggleTheme}> <Component {...pageProps} /> ... </AppLayout> </ThemeProvider> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> </PersistGate> </Provider> ); } export default App;

해당 UI 명칭을 알 수 있을까요? 좋은 레퍼런스도 있다면 도움 부탁드려요!

해당 UI를 개발하려고 합니다. 라이브러리 없이 개발하려고 했으나 사이즈 조절 계산식이 없다보니 넓이에 꽉차게 이미지들이 안들어가더라구요. 혹시 사용해보신 라이브러리나 검색 키워드가 있을까요? 찾아봤는데 mosonry layout만 나오더라구요.. 이미지가 안올라가네요! 구글 이미지 탭 접속하면 나오는 이미지 갤러리 입니다! 도움부탁드립니다!

next.js 특정 페이지에 컴포넌트 미출력 기능 구현 이슈(use client 사용)

로그인페이지(/user-page)에서 footer컴포넌트를 안띄우는 기능을 구현하고 싶어 footer 컴포넌트를 csr 방식으로 사용하도록 'use client' 줬습니다. 근데 error ReferenceError: window is not defined 라는 에러가 뜨면서 적용이 안되네요ㅠㅠ nextjs는 ssr이니까 window에 접근하기 위해선 'use client'를 주면 된다고 들었는데 왜 안되는걸까요?? 찾아보니까 useEffect 쓰라해서 useEffect도 써봤는데 에러가 뜨진않지만 여전히 적용안되더라구요. 문제점 알려주시면 감사하겠습니다ㅠㅠㅠ <footer.tsx 파일> 'use client' import React, { useEffect } from 'react' import style from '../styles/footer.module.scss' const Footer = () => {     if (window.location.pathname === '/user-page') return null return ( -생략- ) } <루트 layout.tsx 파일> 'use client' export default function RootLayout({     children, }: {     children: React.ReactNode }) {   return (         <html lang="ko">             <body className={inter.className}>                 <div className="wrap bg-white">                     <Header />                     {children}                     <Footer />               </div>             </body>         </html>     ) }

nextjs 전역 상태관리 질문

안녕하세요 nextjs(App router 사용)로 프로젝트를 진행하고 있는데, 전역상태를 정의하기 위해서 zustand를 사용하려고 하고 생각중입니다. 전역 상태를 정의하기 위해서는 1. 가장 root가 되는 layout.tsx에 provider를 불러와 감싸주어, 전역적으로 참조할 수 있도록 하는 것 2. persist middleware을 사용해서 LocalStorage에 저장하는 방식으로 상태를 관리하는 것 이 정도 두 가지가 있는 것 같은데, 질문은 1. 만약 1번 방법을 사용한다면 client component로 선언한 custom provider로 자식 컴포넌트를 감싸게 될텐데, 그러면 상태가 변경됨에 따라 하위 컴포넌트들(server, client 상관없이)이 모두 리렌더링 되는 것인가요? 만약 그렇게 된다면 SSR의 의미가 사라지는 것 아닌가요? 2. 일반적으로 nextjs에서는 전역 상태를 어떤 식으로 관리하나요? 입니다. 감사합니다!

React와 scss를 사용해서 개발시 style control

React와 scss기반으로 개발시 전체적인 layout과 관련하여 최상위 컴포넌트의 className이나 inline style을 변경해야할 경우에 아래 두 방식중 어떤 것이 좋은 방법일까요?? (1) state(context api) 사용하고 하위 컴포넌트의 전체 재실행 되는 것이 정상이다. (2) querySelector를 통해 직접 DOM 접근하여 하위 컴포넌트의 전체 재실행을 피한다.

해당 스프링부트 코드 해석 좀 부탁드립니다..

안드로이드에쓸 스프링부트 코드를 따왔는데 제가 잘이해사 안되서 상세히 알려주실 선배님조언 구합니다 package com.example.teamproject import MyAdapter import android.content.Context import android.content.Intent import android.icu.lang.UCharacter.GraphemeClusterBreak.L import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.widget.Toast import androidx.recyclerview.widget.DividerItemDecoration import androidx.recyclerview.widget.LinearLayoutManager import com.example.teamproject.databinding.ActivitySearchBinding import com.example.teamproject.login.LoginActivity import com.example.teamproject.model.RstrModel import com.example.teamproject.review.ReviewActivity import com.google.android.material.bottomnavigation.BottomNavigationView import retrofit2.Call import retrofit2.Callback import retrofit2.Response class SearchActivity : AppCompatActivity() { lateinit var binding: ActivitySearchBinding private lateinit var adapter: MyAdapter override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = ActivitySearchBinding.inflate(layoutInflater) setContentView(binding.root) setSupportActionBar(binding.toolbar) supportActionBar?.setDisplayShowTitleEnabled(false) binding.toolbar.title = "검색" val loginSharedPref = applicationContext.getSharedPreferences("login_prof", Context.MODE_PRIVATE) val userId = loginSharedPref.getString("m_id", null) val userService = (applicationContext as MyApplication).userService // 하단바 초기값 설정 val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottommenu) bottomNavigationView.selectedItemId = R.id.second_tab // 하단바 선택시 이벤티 binding.bottommenu.setOnItemSelectedListener {item -> when(item.itemId) { R.id.first_tab -> { val intent = Intent(this@SearchActivity, MainActivity::class.java) startActivity(intent) } R.id.third_tab -> { val intent = Intent(this@SearchActivity, ReviewActivity::class.java) startActivity(intent) } R.id.fourth_tab -> { if ( userId == null){ val intent = Intent(this@SearchActivity, LoginActivity::class.java) startActivity(intent) } else { val intent = Intent(this@SearchActivity, MyDining::class.java) startActivity(intent) } } R.id.fifth_tab -> { if ( userId == null){ val intent = Intent(this@SearchActivity, LoginActivity::class.java) startActivity(intent) } else { val intent = Intent(this@SearchActivity, MyProfilePage::class.java) startActivity(intent) } } } true } binding.searchBtn.setOnClickListener { var rstr_nm = binding.searchText.text.toString() val getnamecount = userService.getNamecount(rstr_nm) getnamecount.enqueue(object: Callback<Int>{ override fun onResponse(call: Call<Int>, response: Response<Int>) { if ( response.isSuccessful ){ val ncount = response.body() if (ncount != null) { if ( ncount >= 1){ val getname = userService.getName(rstr_nm) getname.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val rstrlist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, rstrlist) binding.recyclerView.addItemDecoration( DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL) ) } } override fun onFailure( call: Call<List<RstrModel>>, t: Throwable ) { call.cancel() } }) } else { Toast.makeText(this@SearchActivity, "검색 결과가 없습니다!", Toast.LENGTH_SHORT).show() } } } } override fun onFailure(call: Call<Int>, t: Throwable) { call.cancel() } }) } binding.area1.setOnClickListener { val rstr_addr = binding.area1.text.toString() val getarea = userService.getArea(rstr_addr) getarea.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.area2.setOnClickListener { val rstr_addr = binding.area2.text.toString() val getarea = userService.getArea(rstr_addr) getarea.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.area3.setOnClickListener { val rstr_addr = binding.area3.text.toString() val getarea = userService.getArea(rstr_addr) getarea.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.area4.setOnClickListener { val rstr_addr = binding.area4.text.toString() val getarea = userService.getArea(rstr_addr) getarea.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.area5.setOnClickListener { val rstr_addr = binding.area5.text.toString() val getarea = userService.getArea(rstr_addr) getarea.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.area6.setOnClickListener { val rstr_addr = binding.area6.text.toString() val getarea = userService.getArea(rstr_addr) getarea.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.area7.setOnClickListener { val rstr_addr = binding.area7.text.toString() val getarea = userService.getArea(rstr_addr) getarea.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.type1.setOnClickListener { val rstr_list = binding.type1.text.toString() val gettype = userService.getType(rstr_list) gettype.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.type2.setOnClickListener { val rstr_list = binding.type2.text.toString() val gettype = userService.getType(rstr_list) gettype.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.type3.setOnClickListener { val rstr_list = binding.type3.text.toString() val gettype = userService.getType(rstr_list) gettype.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.type4.setOnClickListener { val rstr_list = binding.type4.text.toString() val gettype = userService.getType(rstr_list) gettype.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.type5.setOnClickListener { val rstr_list = binding.type5.text.toString() val gettype = userService.getType(rstr_list) gettype.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } binding.type6.setOnClickListener { val rstr_list = binding.type6.text.toString() val gettype = userService.getType(rstr_list) gettype.enqueue(object: Callback<List<RstrModel>>{ override fun onResponse( call: Call<List<RstrModel>>, response: Response<List<RstrModel>> ) { if ( response.isSuccessful ){ val arealist = response.body() binding.recyclerView.adapter = MyAdapter(this@SearchActivity, arealist) binding.recyclerView.addItemDecoration(DividerItemDecoration(this@SearchActivity, LinearLayoutManager.VERTICAL)) } } override fun onFailure(call: Call<List<RstrModel>>, t: Throwable) { call.cancel() } }) } } }

antd 를 서버 컴포넌트로 사용할 방법

nextjs app dir 을 사용하면서 antd 를 이용한 어드민 개발을 하고 있는데, antd 를 사용하다보니 최상단 layout 에서 클라이언트 컴포넌트가 선언되어 래핑되다보니 모두 클라이언트 컴포넌트가 되어 제대로 사용하는게 맞는지 의문이 듭니다. ants 를 서버 컴포넌트로 사용할 방법이 아예 없을까요?ㅠㅠ

Next.js 13에서 스타일 컴포넌트 관련 질문이 있습니당

개인 프로젝트 진행 간에, 의문이 생기는 부분이 생겨 질문드립니다. sc로 전역을 감싸는 레이아웃 컴포넌트를 만들어 root layout 쪽에 배치를 시켜 children 을 받도록 배치를 시켰는데요, 클라이언트 컴포넌트가 너무 루트 가까이에서 생성되는 것이 아닌가…… 싶어서요. 공식 문서 상으로는 성능을 위해서는 클라컴포넌트는 최대한 리프쪽으로 배치하랫는데… 그래서 제가 이해하기론 클라 컴포넌트가 선언이 되면 그 하위 컴포넌트들음 모두 클라 컴포넌트가 되는 것으로 이해를 했는데 제대로 이해를 한 것인지 궁금합니다.

안드로이드 블루투스 권한 요청

override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = ActivityMainBinding.inflate(layoutInflater) if (bluetoothAdapter == null) { Toast.makeText(this, "블루투스를 지원하지않는 기기입니다", Toast.LENGTH_SHORT).show() finish() } setContentView(binding.root) binding.btn3.setOnClickListener { checkBlueToothConnectPermission() } } override fun onRequestPermissionsResult( requestCode: Int, permissions: Array<String>, grantResults: IntArray ) { super.onRequestPermissionsResult(requestCode, permissions, grantResults) if (requestCode == PERMISSION_REQUEST_BLUETOOTH_CONNECT) { if (grantResults.isNotEmpty() && grantResults[0] == PackageManager.PERMISSION_GRANTED) { // 권한이 허용된 경우 처리할 코드 } else { Toast.makeText(this, "BLUETOOTH_CONNECT 권한이 필요합니다.", Toast.LENGTH_SHORT).show() } } } fun checkBlueToothConnectPermission() {//앱에서 블루투스 연결 권한이 있는지 확인하고 없는경우 권한을 요청하는데 사용됨 if (ContextCompat.checkSelfPermission(this, Manifest.permission.BLUETOOTH_CONNECT) != PackageManager.PERMISSION_GRANTED ) { if (ActivityCompat.shouldShowRequestPermissionRationale(this, Manifest.permission.BLUETOOTH_CONNECT)){ AlertDialog.Builder(this) .setTitle("권한 요청") .setMessage("블루투스 연결 권한이 필요합니다.") .setPositiveButton("확인") { _, _ -> ActivityCompat.requestPermissions( this, arrayOf(Manifest.permission.BLUETOOTH_CONNECT), PERMISSION_REQUEST_BLUETOOTH_CONNECT ) } .setNegativeButton("취소", null) .show() }else{ ActivityCompat.requestPermissions( this, arrayOf(Manifest.permission.BLUETOOTH_CONNECT), PERMISSION_REQUEST_BLUETOOTH_CONNECT ) } } } 버튼을 눌러서 권한요청을하는데 거부를 했다면 다시한번 눌렀을때 다시권한요청을 하고싶은데 어떻게 하시는지 아시는분 계신가요ㅜ 한번 거부가 되면 요청다이얼로그가 뜨지않는걸 알고 대화상자로 처리할라고하는데 대화상자도 안뜨네요 ㅜ

Next.js를 이용한 사이트 내 탭 구현과 링크 추가 방법에 대한 고민

next.js를 사용해서 브라우저에 탭 기능을 사이트 내에서 구현해야 하는 상황입니다. 탭 기능에 추가로 페이지 내부에서 다른 페이지로 가는 링크를 클릭하면 탭 목록에 추가되어야 하고 기존에 있던 탭에 보이던 페이지는 상태가 유지되어야 합니다. 지금 구현한 방법은 미리 모든 페이지의 페이지 컴포넌트를 하나의 파일에 넣어두고 링크를 클릭하면 store에 해당 페이지의 데이터를 넣어주고 Layout 컴포넌트에서 router.path를 비교해서 show/hide을 결정해주고 있는데 뭔가 다른 방식이 없을까요?

next/image 컴포넌트를 사용할 때 왜 width, height를 필수 입력해야 하나요?

next.js Image 컴포넌트를 사용하면 width, hegiht를 명시하거나 layout=fill 속성을 써야하는데 혹시 이유를 아시는분 있으신가요? 면접에서 질문을 받았는데 대답을 못했습니다.. 실무 하시는 분들의 답변이 궁금하네요. 미리 감사합니다...!

Next.js 의 _layout.tsx 파일 내에서 server side 데이터를 활용할 방법이 있을까요 ?

네비게이션 바에서 로그인, 로그아웃 상태를 구분해서 구현을 다르게 해주려고 합니다. 문제는 네비게이션 바 컴포넌트를 _layout.tsx 내에 구분했는데 여기서 getServerSideProps 를 사용할수 없더라고요. API 호출을 사용하면 해결되기는 하지만 getServerSideProps 를 사용할 때보다 느려서 사용하기 애매합니다. 혹시 다른 좋은 방법이 있을까요 ?

next.js 13버전 app 폴더를 현업에서 사용해도 괜찮을까요?

안녕하세요:) 회사에서 next.js로 신규 프로젝트를 생성하려고 합니다. 기존에는 react만 사용하는 프로젝트가 두 개 있었습니다. 새롭게 프로젝트를 만들게 되면서 next.js 13버전을 사용할 건데 관련하여 선배님들의 좋은 의견을 듣고 싶습니다! 질문의 요지는 page 폴더가아닌 app 디렉토리를 실서비스에서 사용해도 괜찮을지입니다. app 디렉토리를 사용하면 layout 기능을 사용할 수 있고 서버 컴포넌트로 동작한다고 해서 상당히 끌리는 것 같습니다. 우려되는건 실서비스에 사용해도 될 만큼 안정성이 확보됐는지인데 현업에서 app 폴더를 사용해보신 분이나 관련하여 좋은 의견 부탁드립니다. 감사합니다!

Next.js SSR + react-query 조합에서의 serializing 에러

안녕하세요! Next.js SSR + react-query 조합을 사용하려고 하는데요, page 컴포넌트 내 getServerSideProps 함수에서 prefetching을 받아온 후에 serializing 에러가 발생합니다. (Next.js는 13버젼입니다.) 에러 내용은 다음과 같습니다. Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in "/top". Reason: `object` ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types. 해당 에러 내용으로 구글링을 해보니, 대부분 getServerSideProps 함수 반환 코드에서 return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; 와 같이 dehydrate(queryClient)값을 JSON화 -> Object화를 하라고 하는데요, 이와 같이 사용해도 또 다시 아래와 같은 에러가 납니다. TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'Socket' --- property '_httpMessage' closes the circle Backend API는 Express.js를 사용하고 있으며, res.status(200).json({ data: ~ })와 같은 방식으로 응답을 주고 있습니다. 어떻게 해결할 수 있을까요? 코드 첨부가 안되네요, 아래는 page 컴포넌트가 위치한 파일의 전체 코드입니다. import type { ReactElement } from 'react'; import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import TopMusicContainer from '~containers/TopMusicContainer'; import Layout from '~layouts/Layout'; import type { NextPageWithLayout } from '~pages/_app'; import TopMusicService from '~services/topMusicService'; import * as MusicType from '~types/musicType'; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery(['fetchTopMusic'], () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: ['fetchTopMusic'], queryFn: () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }, }); return ( <section> <TopMusicContainer /> </section> ); }; Top.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Top;

디자이너와 Figma로 협업하고 계시는 개발자분들에게 질문드려요

Unity3d로 AR VR을 개발 디자인하다가 최근 Figma로 웹앱을 만들일이 생겨 UI디자인을 하며 개발자분들과 작업을 하고 있는데요. 디자이너가 Figma로 디자인을 공유 드릴 때 텍스트등 각각의 오브젝트들이 AutoLayout등으로 꼭 구분이 되어야 하는지 궁금합니다. 왜냐면 최근까지는 대부분의 요소에 Autolayout로 정리를 해두었는데요. 가끔 급하게 프로젝트가 흘러갈때 미처 Autolayout을 빠트리고 화면을 구성해도 개발자분들께서 아무말 없이 구현을 해놓으시더라고요. 이게 불편함을 감수하고 딱히 제게 말씀없이 해내시는 것인지 궁금합니다. Autolayout으로의 구성이 필수가 아닌 되있으면 구현하기 편리한 수준의 요소인 것인지 여쭙고 싶습니다.

안드로이드 fragment 관련해서 질문이 있습니다

사진과 같이 frameLayout 을 배치했습니다. 두 fragment 모두 addToBackStack으로 쌓을 예정입니다. SearchResult fragment 에서 channel fragment 를 호출하면 화면에 띄워지지만, Channel fragment에서 searchResult fragment를 호출하면 화면에 보이지 않습니다. 레이아웃 배치 때문에 가려지는 것이라 생각하고 있습니다. 이럴 경우 어떻게 해결해야 하나요?

리액트에서 "렌더링(rendering)"은 어떤 의미인가요?

안녕하세요 HTML, CSS, javascript 기초를 공부한 뒤 이제 막 React를 배우고 있는 웹 프론트엔드 취준생입니다. "렌더링"이라는 단어가 프론트엔드 개발에 있어서 범용적으로 쓰이는 단어인 것 같습니다. HTML을 공부할 때 '브라우저의 렌더링'에 대해 배웠는데요, React를 공부하다 보니 렌더링, 리렌더링 등 다시한번 렌더링이 나와서 브라우저의 렌더링과 React의 렌더링의 차이는 무엇인지 궁금해졌습니다. 브라우저 렌더링은 HTML, CSS를 파싱한 Render Tree를 Layout과 Paint 단계를 거쳐 브라우저 화면에 보여주는 것으로 이해했습니다. React에서 렌더링은 어떤 작업을 하는 것일까요? State가 변경되면 컴포넌트가 렌더링된다는 사실은 알지만 무엇을 렌더링하는 것인지 궁금합니다. 감사합니다.