DEEPDIVE

FrontEnd/Deep Dive
[React] Deep Dive 모던 리액트(16) 훅을 통한 전역상태관리 구현
이전 글에서 소개했듯이 정말 오랜 기간동안 리액트 애플리케이션의 상태관리는 리덕스에 의존했다. 심지어 일부 개발자들은 리액트 + 리액트를 하나의 프레임워크 정도로 생각할 정도였다. 하지만 지금은 Context API , useReducer , useState의 등장으로 리덕스 외의 다른 상태관리 라이브러리를 선택하는 경우가 많아졌다고 한다. ( 리덕스가 조금 수고스럽긴 하다) useState 해당 훅의 등장으로 리액트에서는 여러 컴포넌트에 걸쳐 동일한 인터페이스의 상태를 생성하고 관리할 수 있다. 아래와 같은 훅이 있다고 생각해보자. const useCounter = () => { const [counter, setCounter] = React.useState(0); function increase() ..
→2024.01.03
FrontEnd/Deep Dive
[React] Deep Dive 모던 리액트(13) 리액트와 서버사이드
기본적으로 리액트는 프론트엔드 라이브러리이다. 하지만 리액트 애플리케이션을 서버에서 렌더링 할 수 있게 해주는 API 또한 제공하고 있다. 당연히 해당 API는 window환경이 아닌 Node.js와 같은 서버 환경에서만 실행할 수 있다. 현재 리액트 18이 릴리스되며 react-dom/server 에 renderToPipeableStream이 추가되었고 나머지는 대부분 지원중단 되는등 큰 변화가 있었다. 이 내용들도 따로 다루기로 하고 기존에 있던 함수들에 대해 알아보자. renderToString 인수로 넘겨받은 리액트 컴포넌트를 렌더링해 HTML문자열로 반환하는 함수 import React, { useEffect } from "react"; function ChildrenComponent({ fru..
→2023.12.27
FrontEnd/Deep Dive
[React] Deep Dive 모던 리액트(12) 서버사이드 렌더링(SSR)
과거 리액트 애플리케이션을 만들때는 CRA(create-react-app)이 각광받았지만 요즘은 서버사이드 렌더링을 지원하는 Next.js와 같은 프레임워크가 큰 인기를 끌고 있다. 싱글 페이지 애플리케이션 SPA(Single Page Application) 이란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 JS에 의존하는 방식을 의미한다. 최처에 첫 페이지에서 데이터를 모두 불러온 후 페이지 전환을 위한 모든 작업을 JS와 브라우저의 history.pushState와 history.replaceState로 이뤄진다. 이러한 작동방식은 최초 로딩해야할 JS리소스가 커진다는 단점이 존재하긴 하지만 로딩 이후 서버를 거쳐 필요한 리소스를 받아올 일이 적어져 사용자에게 훌륭한 UI/UX를 제공한다는 ..
→2023.12.26
FrontEnd/Deep Dive
[React] Deep Dive 모던 리액트(9) useMemo,useCallback,useRef
useMemo useMemo는 비용이 큰 연산에 대한 결과를 저장해두고 이 저장된 값을 반환하는 훅이다. import { useMemo } from 'react' const memoizedVAlue = useMemo(() => expensiveComputation(a,b),[a,b]) 첫번째 인수로는 어떤 값을 반환하는 생성함수를, 두번째 인수로는 해당 함수가 의존하는 값의 배열을 반환한다. useMemo는 의존성 배열의 값이 변경되지 않으면 함수를 재실행하지 않는다. 이런 메모이제이션은 값이 아니라 컴포넌트에 적용하는 것 또한 가능하다! import React, { useEffect, useMemo, useState } from "react"; function ExpensiveComponent({ va..
→2023.12.22
FrontEnd/Deep Dive
[React] Deep Dive 모던 리액트(8) useState & useEffect
이제부터 리액트의 훅에 대해서 제대로 알아보고자 한다. 훅은 클래스형 컴포넌트에서만 가능했던 state,ref 등 리액트의 핵심 기능을 함수에서도 가능하게 만들어 준 것이다. 리액트로 웹 서비스를 만드는 개발자라면 훅이 어떻게 동작하는지에 대해서는 이해할 필요가 있다. useState 함수형 컴포넌트 내부에서 상태를 정의하고 이 상태를 관리할 수 있게 해주는 훅이다. 아래처럼 생겼다. import {useState} from 'react' const [state,setState] = useState(initialState) useState()의 인수로는 state의 초깃값을 넘겨주면 된다. 만약 useState를 사용하지 않으면 어떻게 될까? import React from 'react' const Co..
→2023.12.21
FrontEnd/Deep Dive
[React] Deep Dive 모던 리액트(6) 클래스형&함수형 컴포넌트
함수형 컴포넌트는 리액트 0.14버전부터 있었던 생각보다 오래된 문법이다. var Aquarium = (props) -> { var fish = getFish(props.species) return {fish} } var Aquarium = ({species}) => {getFish(species)} 이당시 함수형 컴포넌트는 클래스형 컴포넌트에서 별다른 생명주기 메서드나 상태가 없이 단순히 render를 하는 경우에만 사용되었다. 함수형 컴포넌트에 훅이 등장하면서 점점 복잡한 클래스 컴포넌트보다 함수형 컴포넌트가 사용되었다. 이 과도기에서 문제도 많았고 과연 함수형 컴포넌트와 클래스형 컴포넌트의 차이가 무엇인지 알 필요도 있다. 클래스형 컴포넌트 리액트 16.8 미만으로 작성된 코드는 대부분 클래스형 컴..
→2023.12.19

• 이전
• 1
• 2
• 3
• 4
• 5
• ···
• 9
• 다음