선호:하다

MPA MPA란 Multi Page Application의 약자로 여러 개의 페이지로 이루어진 어플리케이션을 말한다. MPA에서 사용하는 렌더링 방식을 SSR(Server Side Rendering)이라고 한다. SSR은 말그대로 서버측에서 사용자에게 보여줄 페이지를 정적인 HTML로 미리 렌더링하여 반환한다. 그 다음 사용자가 페이지를 이동할 때마다 서버에 요청하여 새로운 페이지의 HTML을 받아오며 완전히 새로운 페이지로 이동하게된다. 최초 렌더링이 빠르다는 장점이 있지만 페이지를 이동할 때마다 완전히 새로운 페이지로 이동하기 때문에 화면이 깜빡이며 새로고침된다는 단점이 있다. 페이지의 용량이 무거워질 경우 로딩 시간이 길어져 사용자 경험이 나빠질 수 있다. SPA SPA란 Single Page Ap..

Context 사용하는 경우 위는 현재 진행하고 있는 일기장 프로젝트의 컴포넌트 트리 구조이다. 최말단 컴포넌트인 DiaryItem에 prop을 전달하기 위해서는 최상단 컴포넌트인 App에서 중간 단계 컴포넌트인 DiaryList에 prop을 넘겨주고 이를 다시 DiaryItem에 전달하는 방식을 따르게 되는데 이는 너무 번거롭고 규모가 커질 수록 복잡해질 것이다. 이러한 경우 Context를 사용하여 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. Context Context는 리액트 컴포넌트 트리 안에서 전역 데이터를 공유하고 관리할 수 있는 방법이다. react 패키지에서 제공하는 createContext 함수를 사용하여 Context를 생성한다. Con..

useReducer useReducer는 컴포넌트에서 상태변화 로직을 컴포넌트 밖으로 분리하기 위해 사용하는 Hook이다. 즉, 컴포넌트 안에서 useState를 사용하는 것과 같이 state를 컴포넌트 밖에서 관리할 수 있다. 컴포넌트에서 관리하는 상태가 너무 많아져 구조가 복잡해지는 경우 useState 대신 사용한다. const [count, dispatch] = useReducer(reducer, 1); 먼저 useState를 사용하듯이 비구조화 할당을 통해서 각각 현재 상태와 상태를 변화시키는 dispatch 함수를 할당받는다. 그리고 useReducer의 첫 번째 인자로 꼭 reducer라는 함수를 전달해야하는데 이는 dispatch 함수가 상태 변화를 일으키면 일어난 상태변화를 reducer..

useCallback useCallback은 함수를 메모이제이션 하기 위해서 사용하는 React Hooks이다. useCallback(() => {}, []); 첫 번째 인자로는 콜백함수, 두 번째 인자로는 의존성 배열을 받으며 배열 안에 들어있는 값이 변화하면 메모이제이션된 콜백함수가 반환된다. useCallback 사용 예제 크롬의 확장도구인 React Developer Tools에서 사용할 수 있는 highlight updates when components render 기능을 통해 어떠한 작업이 수행될 때 어떤 컴포넌트가 렌더링되는지를 시각적으로 확인해보자. 일기리스트에 있는 목록 중 하나를 삭제하거나 수정하면 해당 작업과 아무 상관이 없는 DiaryEditor 컴포넌트도 렌더링..

Re-Rendering 리렌더링은 렌더링이 다시 일어나는 경우를 말하며 리액트에서 리렌더링은 다음과 같은 상황에 일어난다. 1. Props가 변경 2. State가 변경 3. 부모 컴포넌트가 re-render 4. Context value가 변경되었을 때 규모가 큰 프로젝트에서 불필요한 리렌더링이 자주 일어나면 성능 저하 문제를 발생시키기 때문에 최적화라는 작업이 필요하다. 즉, 최적화는 위 4가지 상황이 일어나는 횟수를 줄이는 작업이며 먼저 부모 컴포넌트의 리렌더링 횟수를 줄이는 것을 기본으로 하며, 그리고 주로 props의 변경을 줄이는 방법을 사용한다. 최적화가 필요한 경우 예제 const getDiaryAnalysis = () => { console.lo..

fetch() API를 호출하는데 사용되는 자바스크립트 내장 객체 fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); 첫 번째 인자로 API의 URL, 두 번째 인자로 옵션 객체를 받음 옵션 객체에는 HTTP 방식, HTTP 요청 헤더 등을 설정할 수 있음 Promise 타입의 객체를 반환 - API 호출 성공시(then)에는 응답(response)객체를 resolve하고 - 실패했을 경우(catch)에는 예외(error) 객체를 reject함 API 호출 예제 const getData = async () => { const res =..

리액트의 생명주기(LifeCycle) 모든 리액트 컴포넌트는 생성(mount), 업데이트(update), 제거(unmount)의 생명주기를 갖는다. 클래스형 컴포넌트는 생명주기 메소드를 통해 생명주기를 제어할 수 있고, 함수형 컴포넌트는 React Hook 중 useEffect를 활용하여 생명주기를 제어한다. useEffect로 생명주기 제어하기 useEffect의 기본 형태는 다음 네 가지 형태로 사용할 수 있다. 1. useEffect(callBackFunc); 2. useEffect(callBackFunc, []); 3. useEffect(callBackFunc, [state]); 4. useEffect(callBackFunc, {return(() => func())}; 1번의 경우, 컴포넌트가 마..

1. 리스트 렌더링 컴포넌트에서 배열을 props로 받음 배열의 map 메소드를 사용하여 데이터들을 하나씩 렌더링 ※ map 메소드 사용시 주의사항 1. map 메소드를 사용해 리액트 컴포넌트 리스트를 렌더링 할 때에는 반드시 리스트의 각 컴포넌트는 고유한 key prop을 제공받아야 함. 그 이유는 리액트가 리렌더 과정에서 리스트 내부의 컴포넌트를 식별하기 위함 2. map의 콜백함수로 사용되는 함수를 화살표 함수로 사용할 때 2줄 이상의 코드가 필요하다면 화살표 함수의 문법대로 중괄호를 사용해야 하며 return 키워드로 별도의 반환을 해주어야 한다. 만약 그렇지 않고 값을 반환해야 할 경우 소괄호 및 중괄호는 필요하지 않다. 다만 화살표 함수에서 객체를 반환하거나 JSX 요소를 반환해야할 경우 소괄..

컴포넌트(Component) 리액트로 만들어진 앱을 이루는 최소한의 단위 UI를 기능에 따라 여러 컴포넌트로 나누어 개별적으로 작성 컴포넌트를 이용하여 코드의 재사용이 가능 컴포넌트는 props(데이터)를 받아 state에 따라 DOM 노드를 반환 컴포넌트의 이름은 항상 대문자로 시작 'export default 컴포넌트명' 코드를 통해 외부로 내보낼 수 있음 클래스형 컴포넌트와 함수형 컴포넌트로 구분 클래스형 컴포넌트 class Welcome extends React.Component { render() { return Hello; } } 클래스형 컴포넌트는 React.Component 클래스를 상속받는다. 컴포넌트는 JSX를 반환해야하는데, 클래스는 return 문을 사용할 수 없으므로, render..

JSX란 JSX는 리액트에서 사용하는 자바스크립트와 HTML을 동시에 사용할 수 있는 템플릿 언어이다. JSX로 작성된 코드는 브라우저에서 실행하기 전에 바벨을 통해 일반 자바스크립트 코드로 변환된다. import React from 'react'; function App() { return ( Hello World! ); } export default App; JSX 문법 하나의 컴포넌트는 무조건 무언가를 return 해야함 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함 // 잘못된 코드 function App(){ return( Hello Is it working well? ) } // 올바른 코드 function App(){ return( Hello Is it working we..