![]()
// Test.tsx import { useState } from "react"; const Test = () => { const [click, setClick] = useState(0); // 클릭 수를 저장하는 상태 변수 function handleClick() { setClick(click + 1); // 클릭 수를 1 증가시킴 } return ( 버튼을 클릭하면 숫자가 변경됩니다 {click}번 클릭됨 {/* 클릭 수를 표시하는 버튼 */} ); }; export default Test; // App.tsx import React from "react"; import "./App.css"; import { Route, Routes } from "react-router-dom"; import Pos..
![]()
// async/await으로 호출 import React, { FC, useEffect, useState } from "react"; const Test: FC = () => { // 문자열 타입의 상태 변수 data를 선언하고 초기값으로 빈 문자열을 할당한다 const [data, setData] = useState(""); useEffect(() => { async function test() { // 비동기로 데이터를 가져오기 위해 fetch 함수를 사용해 API를 호출한다 const response = await fetch("https://jsonplaceholder.typicode.com/todos/1"); // 응답 데이터를 JSON 형식으로 변환해 jsonObj에 할당한다 const jso..
![]()
Suspense on the server New Suspense SSR Architecture in React 18 · Discussion #37 · reactwg/react-18 Overview React 18 will include architectural improvements to React server-side rendering (SSR) performance. These improvements are substantial and are the culmination of several years of work. Most... github.com 서버 사이드 렌더링의 장점 서버 사이드 렌더링을 하지 않을 때는 자바스크립트가 로드되기 전까지는 아무것도 볼 수가 없다. 하지만 서버 사이드 렌더링을 하..
![]()
Suspense on the server New Suspense SSR Architecture in React 18 · Discussion #37 · reactwg/react-18 Overview React 18 will include architectural improvements to React server-side rendering (SSR) performance. These improvements are substantial and are the culmination of several years of work. Most... github.com 서버 사이드 렌더링 리엑트의 서버 사이드 렌더링은 다음의 단계로 진행된다. 서버에서 전체 앱에 대한 데이터를 가져온다. 서버에서 전체 앱을 HTML로 렌..
![]()
Automatic batching 배칭(batching)은 업데이트 대상이 되는 상태 값들을 하나의 그룹으로 묶어 리렌더링 한 번에 업데이트가 모두 진행되게 하는 걸 의미한다. 한 함수 안에서 setState를 아무리 많이 호출해도 리렌더링은 한 번만 발생한다. 함수에 끝에서 업데이트되며 리액트는 마지막에 한 번만 리렌더링한다. 이것은 여러 번 리렌더링을 하는 걸 막기 때문에 성능상 좋은 영향을 준다. batch update를 사용해 불필요한 리렌더링을 줄일 수 있어 퍼포먼스적으로 큰 이점을 얻을 수 있는데, 이전 버전에서도 이런 batch update가 지원되었으나 클릭과 같은 브라우저 이벤트에서만 적용 가능하고 api 호출에 콜백으로 넣은 함수나 timeouts 함수에서는 작동하지 않았다. batch..
![]()
쿼리 함수 쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법이다. 여러 유형의 쿼리("get", "find", "query")가 있다. 이들 간의 차이점은 요소가 발견되지 않으면 쿼리에서 오류가 발생하는지 또는 Promise를 반환하고 다시 시도하는지 여부이다. 선택하는 페이지 콘텐츠에 따라 다른 쿼리가 다소 적절할 수 있다. get, find, query 의 차이점 쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법이다. 여러 유형의 쿼리("get", "find", "query")가 있다. 이들 간의 차이점은 요소가 발견되지 않으면 쿼리에서 오류가 발생하는지 또는 Promise를 반환하고 다시 시도하는지 여부이다. 선택하는 페이지 콘텐츠에 따라 다른 쿼리가 다소 적..
![]()
Create React App로 리액트 앱을 생성하면 기본적으로 테스팅 할 때 React Testing Library를 사용한다. React Testing Library React Testing Library는 React 구성 요소 작업을 위한 API를 추가하여 DOM Testing Library 위에 구축된다. DOM Testing Library는 Dom Node를 테스트하기 위한 가벼운 솔루션이다. Create React App으로 생성된 프로젝트는 즉시 React Testing Library를 지원한다. 그렇지 않은 경우 다음과 같이 npm을 통해 추가할 수 있다. npm install --save-dev @testing-library/react 리액트 컴포넌트를 테스트하는 가벼운 솔루션 React..
![]()
테스트 주도 개발 실제 코드를 작성하기 전에 테스트 코드를 먼저 작성한다. 테스트 코드를 작성한 후 그 테스트 코드를 Pass할 수 있는 실제 코드를 작성한다. TDD(Test Driven Development)의 장점 TDD를 하므로 인해 많은 기능을 테스트하기에 소스 코드에 안정감이 부여된다. 실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분이기에 TDD를 사용하면 디버깅 시간이 줄어들고 실제 개발 시간도 줄어든다. 소스코드 하나하나를 더욱 신중하게 짤 수 있기 때문에 클린 코드가 나올 확률이 높다.
![]()
Footer 생성 넷플릭스 대한민국 넷플릭스 소개 고객 센터 미디어 센터 이용 약관 개인 정보 회사 정보 문의하기 법적 고지 Netflix Rights Reserved. Style Component 불러오기 import styled from 'styled-components'; const FooterContainer = styled.div` display: flex; justify-content: center; align-items: center; padding: 40px 0; border-top: 1px solid rgb(25, 25, 25); width: 100%; position: relative; z-index: 100; @media (max-width: 769px) { padding: 20px ..
![]()
Memoization 메모이제이션은 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환해 컴퓨터 프로그램의 속도를 높이는 데 주로 사용되는 최적화 기술이다. function Component({ a, b }) { const result = compute(a, b); return {result}; } 컴포넌트 내의 compute 함수가 만약 복잡한 연산을 수행하면 결과 값을 리턴하는 데 오랜 시간이 걸린다. 이럴 때 컴포넌트가 계속 리렌더링되면 연산을 계속 수행하는 데 오랜 시간이 걸려 성능에 안 좋은 영향을 미치게 되며 UI 지연 현상도 일어나게 된다. 이러한 현상을 해결해주기 위해 사용하는 것이 useMemo이다. compute 함수에 넘겨주는 a, b의 값..
![]()
리액트에서 불변성 불변성(immutable)이란 사전적 의미로 값이나 상태를 변경할 수 없는 것을 의미한다. 자바스크립트 타입을 통해 본 불변성의 의미 원시 타입은 불변성을 가지고 있고 참조 타입은 그렇지 않(mutable)다. 원시 타입(Primitive Type) : Boolean, String, Number, null, undefined, Symbol ===> 불변성을 가지고 있음 참조 타입(Reference Type): Object, Array 기본적으로 Javascript는 원시 타입에 대한 참조 및 값을 저장하기 위해 Call Stack 메모리 공간을 사용하지만 참조 타입의 경우 Heap이라는 별도의 메모리 공간을 사용한다. 이 경우 Call Stack은 개체 및 배열 값이 아닌 메모리에만 H..
![]()
Props Props는 Properties의 줄임말이다. Props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법이다. Props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않는다. 변하게 하려면 부모 컴포넌트에서 State를 변경해야 한다. State 부모 컴포넌트에서 자녀 컴포넌트로 데이터를 보내지 않고 해당 컴포넌트 내부에서 데이터를 전달하려면 State를 이용한다. 예를 들어 검색창에 글을 입력할 때 글이 변하는 건 State를 바꾼 것이다. State는 변경 가능(mutable)하다. State가 변하면 re-render된다. Props와 State의 차이점은? Props와 State는 일반 JavaScript 객체다. 두 객체 모두 렌더링 결..
![]()
React Hooks React Hooks는 React Conf 2018에서 발표된 class 없이 state를 사용할 수 있는 새로운 기술이다. React Hooks가 필요한 이유 React Hooks는 주로 클래스형 컴포넌트를 사용했던 React에서 발생한 문제점을 해결하기 위해 개발되었다. React Hooks의 또 다른 이점 왼쪽 코드와 오른쪽 코드를 보면 코드가 훨씬 더 간결해진 걸 볼 수 있다. 클래스형 컴포넌트에서는 생명 주기를 이용할 때 componentDidMount와 ComponentDldupdate 그리고 componentWillUnmount로 서로 다르게 처리하지만, React Hooks를 사용할 때는 useEffect 안에서 한꺼번에 처리할 수 있기 때문이다. HOC(Higher ..
![]()
SPA(Single Page Application) 요즘에는 웹의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다. 이것을 SPA(Single Page Application)라고 한다. SPA에서 화면 변경이 일어나는 방식 전통적인 웹은 a page 에서 b page로 페이지 전환할 때 a.html 을 보여주다가 b.html을 보여주면 됐지만 index.html 밖에 없는 SPA에서는 어떻게 페이지 전환(브라우징)을 할까? HTML 5의 History API로 그것이 가능해졌다. JavaScript 영역에서 History API를 통해 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해준다.
![]()
Virtual DOM React의 주요 특징 중 하나는 virtual DOM을 사용한다는 것이다. 그래서 virtual DOM에 대해 알아봐야 하는데 그 전에 우선 브라우저가 렌더링하는 과정을 살펴봐야 한다. 웹페이지 빌드 과정(Critical Rendering Path, CRP) 브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계를 거친다. 웹 브라우저가 HTML 문서를 읽고 스타일을 입히고 뷰표트에 표시하는 과정이다. 여기에서 문제점은 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그때마다 render tree가 재생성된다. 즉 모든 요소들의 스타일을 다시 계산하고 레이아웃, 리페인트 과정까지 다시 거친다. 이러한 문제로 인해 나온 것이 virtual DOM이다. ..
![]()
리액트는 여러 컴포넌트를 이용해 웹 앱을 개발한다. 컴포넌트는 리액트로 만들어진 앱을 이루는 최소한의 단위다. 리액트는 여러 개의 컴포넌트 조각으로 이루어져 있다. 만약 하나의 페이지를 리액트로 만든다고 했을 때 여러 개의 컴포넌트가 모여 하나의 페이지를 구성한다. 예를 들어 인스타그램 페이지는 검색, 프로필, 스토리, 포스트 컴포넌트 등으로 구성되어 있는데, 이렇게 컴포넌트가 여러 개로 나뉘어 있으므로 하나의 컴포넌트를 여러 곳에서 사용할 수 있다. 또 여러 명이 각자 맡은 컴포넌트를 동시에 수정할 수도 있다. 원래 리액트로 개발할 때는 클래스형 컴포넌트를 이용해 많이 개발했지만 리액트에서 리액트 훅스(React Hooks)를 발표한 이후부터는 주로 함수형 컴포넌트를 이용해 개발한다.
![]()
리액트의 용도 React는 상호 작용(Interaction)이 많은 웹 앱을 개발하기 위해 주로 사용된다. 그러므로 이러한 웹 앱을 만드는 다른 툴인 Vue나 Angular와 많이 비교된다. 처음으로 볼 수 있는 가장 큰 차이점은 프레임워크와 라이브러리의 차이다. Angular와 Vue는 프레임워크이며 리액트는 라이브러리다. 프레임워크와 라이브러리의 차이점은? 프레임워크는 어떤 앱을 만들기 위해 필요한 대부분의 것을 가지고 있다. 라이브러리는 어떤 특정 기능을 모듈화해 놓는다. 프레임워크는 라이브러리를 포함하고 사용자가 작성한 코드를 호출한다. 그리고 코드는 특정 기능을 구현하기 위해 라이브러리를 호출한다. 리액트가 라이브러리인 이유는 리액트는 전적으로 UI를 렌더링하는 데 관여하기 때문이다. 한편 화면..
