React(9)
-
[nextJS] 서버 컴포넌트냐? 클라이언트 컴포넌트냐?
next.js 13버전은 페이지 단위로 렌더링 방식을 규정하지 않고 컴포넌트 단위인 서버 컴포넌트, 클라이언트 컴포넌트로 렌더링을 한다. 📌 server 컴포넌트app 폴더 안에 있는 컴포넌트들이 대부분 서버 컴포넌트이다!server 컴포넌트 코드는 서버에서 실행되고 클라이언트에는 코드의 결과만을 제공한다.따라서 console log 자체도 브라우저가 아닌 서버 터미널에서 실행된다. 클라이언트로 js 코드를 보내지 않기에 클라이언트 측에서 부하도 없고 웹사이트의 로딩 시간을 줄일 수 있는 장점이 있다. When? 언제 사용하는가? 데이터 패칭이 필요한 컴포넌트: 서버에서 데이터를 가져오고, 클라이언트에 그 데이터를 렌더링할 때.상태나 이벤트 처리가 필요하지 않은 UI: 예를 들어, 정적인 콘텐츠나 ..
2024.10.14 -
[js] 웹스토리지와 전역상태 관리
받아온 데이터를 저장하고 화면에 불러오는 작업은 무조건적으로 필요하다.또 새로고침을 했을때 데이터가 휘발되면 안되니까 이럴때 localstorage에 담아두고 불러오곤 했다! 우선 전체적인 개념부터 알아보자 📌웹스토리지? 로컬스토리지? 웹스토리지는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 해주며 한마디로 데이터를 저장하는 공간이다.웹스토리지에는 로컬스토리지와 세션 스토리지가 있는데, 브라우저 내에 키-값쌍을 이용하여 저장한다.원래 window.localStorage를 사용해야하지만, window 객체의 대부분의 속성이 그러하듯, 줄여서 localStorage로 사용 가능하다! 다음과 같은 메소드를 사용한다. - setItem: key-value 쌍을 보관하고,반드시 문자열로!- getIte..
2024.10.13 -
[react] React Portal?
포탈..? 포탈하면 메이플 포탈만 생각나는데.. 저번 수업에서 페이지 url에 변화가 없는데 새로운 페이지가 나오는 경우 이럴때 보통 포탈을 사용한다고 배웠었다.그래서 포탈이 대체 무엇일까!하고 알아보게 되었다. 1. React Portal 개념react 공식문서에 따르면 React Portal이란, 부모 컴포넌트의 Dom 계층 구조 바깥에 있는 Dom 노드로 자식을 렌더링하는 최고의 방법을 제공한다고 한다. 리액트의 데이터 흐름은 단방향(부모->자식)인데, portal을 사용하면 상태를 공유받되 자식 요소에서 상위로 UI를 렌더할 수 있다. 일반적으로 생각해보면 어떻게 자식요소에서 부모요소에 UI를 나오게 할 수 있을까..?라는 의문이 드는데,이를 portal이 해결해준다! 즉, 자식 컴포넌트를 부모..
2024.10.09