본문 바로가기
반응형

React6

[React Hooks] useEffect에 대해서 useEffect 1.useEffect를 쓰는 이유? 매번 컴포넌트가 렌더링 될때 특정 조건에 의존하여 수행되며, 컴포넌트가 최대한 순수 함수를 유지할 수 있도록 도와주는 함수 Mount - 화면에 첫 렌더링 Update - 다시 렌더링 Unmount - 화면에서 사라질때 //첫번째 형태 렌더링이 될때 마다 실행 useEffect(()=>{ //작업 }) 첫번째 형태에서는 렌더링이 될때마다 실행이 된다. //두번째형태 화면에 첫 렌더링이 될때 실행 value값이 바뀔때 실행 value값이 없이 [] 빈배열로 하면 한번만 실행 useEffect(()=>{ //작업 } ,[value]) 두번째 형태에서는 첫번째 렌더링 될때 실행되고 그 이후에는 value값이 바뀔때만 실행이 된다. value값이 없이 [].. 2023. 11. 15.
[React]리액트 컴포넌트(Component)란? 리액트에서 컴포넌트는 빼놓고 이야기할 수 없는 개념이다. 리액트에서 가장 중요한 요소라고 해도 과언이 아닐 정도로 컴포넌트 단위로 개발이 되기 때문이다. "use client"; import Link from "next/link"; import styled from "styled-components"; const NewDate = styled.div` font-size: 12px; color: #999; `; export default async function ListItem({ data }) { return ( {data.map((a, i) => { return ( {a.title} {a.content} ); })} ); } 이런식으로 하나의 기능 및 디자인등을 묶어놓은 단위를 컴포넌트라고 할 수 있.. 2023. 7. 6.
[React]리액트를 쓰는 이유는 무엇일까? 리액트를 쓰는 이유를 알려면 리액트가 어떤 것인지를 알아야된다. Single Page Aplication 을 만들때 사용, 앱처럼 부드러운 페이지를 만들때 사용한다. *Single Page Aplication 말 그대로 하나의 페이지를 사용하는 어플리케이션이다. 서버로부터 새로운 페이지를 가져와서 그려주는것이 아니라, 하나의 페이지에서 동적으로 변경해주는 라이브러리이다. *React의 장점 1.프레임워크 vs 라이브러리 리액트는 화면출력에 특화된 라이브러리이다. 프레임워크 - 원하는 기능 구현에 집중하여 개발할 수 있도록 필요한 기능을 갖추고 있는것 라이브러리 - 소프트웨어를 개발할 때 프로그래밍 사용하는 비휘발성 자원의 모임, 공통으로 사용 될수 있는 특정한 기능들을 모듈화한것 리액트 공식 홈페이지에도.. 2023. 7. 5.
[REACT] CSR : Client Side Rendering 에 대해서 CSR : Client Side Rendering 클라이언트 사이드 렌더링은 SPA로 사이드에서 HTML을 반환한 후에, JS가 동작하면서 데이터만을 주고 받아서 클라이언트에서 렌더링을 진행하는것을 말합니다. 대표적인 라이브러리로 : React Vue Angular가 있습니다. CSR의 장점 1.HTML의 용량은 현저히 낮고 최초에 리소스를 받는것이 빠르기때문에 로딩이 빠르다는 장점이 있습니다. 2.DOM을 자바스크립트에서 만들고 있기 때문에 필요한 것만 그때 그때 만들어서 사용합니다. 3.SSR이 따로 필요하지 않기 때문에 일관성있는 코드를 작성할 수 있습니다. 4.서버의 부하를 줄일수 있습니다. CSR의 단점 1.SEO가 좋지않습니다. 2.사용자가 첫 화면을 보는데 시간이 많이 걸립니다. 3.어플리케.. 2023. 2. 16.