프론트엔드24 상태(state) 업데이트의 비밀(batch)🤫 상태를 업데이트해서 일어나는 과정과 비밀을 알아보겠습니다. 리액트가 렌더링 된 컴포넌트를 언제 업데이트를 시키나요? 다들 아시다시피 바로 상태가 업데이트 됐을 때입니다. import { useState } from 'react'; function App() { const [num, setNum] = useState(0); const onClick = () => { setNum(num + 1); }; return ( {num} 클릭 하면 1이 증가 ); } export default App; 보시다시피 클릭하면 +1이 된 값이 화면에 나타납니다. 너무 당연하죠? 하지만 아래와 같이 setNum(num+1)이 여러 개인 경우에는 어떻게 될까요? 5가 될까요? import { useState } from 'r.. 2023. 6. 12. 서버 컴포넌트로 데이터 불러오기 1. 12 버전에서 데이터 불러오기 12 버전까지는 아래 코드처럼 getServerSideProps나 getStaticProps 함수를 사용해서 데이터를 불러올 수 있다. import MeowArticle from '@/components/MeowArticle'; import { getProduct, getProducts, Product } from '@/service/products'; import Link from 'next/link'; type Props = { products: Product[]; }; export default function SSRPage({ products }: Props) { return ( 제품 소개 페이지 {products.map((product, index) => ( .. 2023. 4. 25. [실전에서 바로쓰는 NextJS] 렌더링 전략 넥스트는 어떤 페이지를 빌드 시점에 정적으로 생성하고 어떤 페이지를 실행 시점에 동적으로 제공할 것인지 쉽게 정할 수 있다 2.1 서버 사이드 렌더링(SSR) 서버 사이드 렌더링은 PHP처럼 HTML 페이지를 웹 브라우저로 전송하기 전에 서버에서 전부 렌더링 함. 그리고 해당 페이지의 모든 자바스크립트 코드가 적재되면 동적으로 페이지 내용을 렌더링함. Next도 용청에 따라 서버에서 HTML 페이지를 동적으로 렌더링하고 웹 브라우저로 전송할 수 있음. 서버에서 렌더링 한 페이지에 스크립트 코드를 집어넣어서 나중에 웹 페이지를 동적으로 처리할 수도 있는데 이를 하이드레이션이라고 함 더 안전한 웹 애플리케이션 페이지를 서버에서 렌더링 한다는 것은 쿠키 관리, 주요 API, 데이터 검증 등과 같은 작업을 서버.. 2023. 3. 14. 합성 컴포넌트(Compound Component Pattern) 가끔 리액트로 컴포넌트를 만들다보면 이렇게 까지 나눠야해? 이런 느낌도 들기도 하고 얼마나 나눠야하지 라는 생각이 들기도 하다. 그래서 합성 컴포넌트에 대해서 알아보자 합성 컴포넌트란? 하나의 컴포넌트를 여러 가지 집합체로 분리한 뒤, 분리된 각 컴포넌트를 사용하는 쪽에서 조합해 사용하는 컴포넌트 패턴을 의미한다. (우선 아래와 같은 다이얼 로그가 있다. 디자인은 무시 바랍니다.) 코드는 이러하다. type Props = { isOpen: boolean; title: string; buttonLabel: string; }; export default function Dialog(data: Props) { const { isOpen, title, buttonLabel } = data; return ( {t.. 2023. 3. 12. 이전 1 2 3 4 5 6 다음
