서버 사이드 렌더링의 이해 서버 사이드 렌더링 vs 클라이언트 사이드 렌더링 브러우저 렌더링이란? 서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업. 즉, 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것 클라이언트 사이드 렌더링(Client Side Rendering)이란? 클라이언트 사이드 렌더링은 클라이언트인 브라우저가 렌더링을 처리하는 방식. 즉, 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면(View)을 그리는 주체가 되는 것 장점 네이티브 앱과 비슷한 빠른 인터렉션을 구현할 수 있음 View 렌더링을 브라우저에게 담당시킴으로서 서버 트래픽을 감소시키고, 사용자에게 더 빠른..

리액트로 프로젝트를 생성하고 배포했을 시 웹팩이라는 도구가 별도의 설정없이 모든 자바스크립트 코드와 CSS 파일을 하나의 파일(main)로 합칩니다. 이 말은 여러 컴포넌트 중 하나의 컴포넌트만 보여진다고 해도 다른 컴포넌트도 자연스래 저장이 된다는 뜻입니다. 이는 파일의 크기를 키우고 로딩이 오래걸려 사용자 경험을 안좋게 할 뿐만 아니라 트래픽도 증가시킬 것 입니다. 이를 해결해 줄 수 있는 방법이 바로 코드 비동기 로딩입니다. 자바스크립트 함수 비동기 로딩 일반 자바스크립트 함수를 스플리팅해 보겠습니다. notify.js export default function notify() { alert('안녕하세요!'); } src/App.js //... function App() { const onClick..

작업환경 설정 리액트 프로젝트를 생성한다. redux와 react-redux 라이브러리를 설치한다. yarn add redux react-redux UI 준비하기 리액트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴 → 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것이다. 프레젠테이셔널 컴포넌트 : 주로 상태 관리가 이루어지지 않고, props만 받아와서 화면에 UI만 보여주는 컴포넌트 컨테이너 컴포넌트 : 리덕스와 연동이 되어있는 컴포넌트 이러한 패턴이 필수는 아니지만, 이 패턴을 사용하면 코드의 재사용성도 높아지고, 관심사의 분리가 이루어져 편리하다. 2개의 컴포넌트를 만드는 실습을 진행 리덕스 관련 코드 작성하기 보통 actions, constants, reducers 각각의 폴더를 만들..

리덕스 가장 많이 사용되는 리액트 상태 관리 라이브러리 모든 state를 store라는 중앙 상태 저장소를 사용하여 저장하고 reducer 함수를 통해 수정. 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리하여 효율적으로 관리할 수 있게 해줌. 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 다른 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 가능. 전역 상태를 관리할 때 효과적. Context API를 통해서도 똑같은 작업을 수행할 수 있지만 프로젝트 규모가 클 경우에는 리덕스를 사용하는 편이 좋음. (상태를 더욱 체계적으로 관리) 장점 1. props drilling 방지 - props drilling이란 컴포넌트가 특정값을 사용하기 위해 여러 상위 컴포넌트에서 props를 정의하고..

Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용하다. ex) 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 Context API는 리액트 관련 라이브러리에서도 많이 사용되고 있다. ex) 리덕스, 리액트 라우터, styled components 등은 모두 context api를 기반으로 구현된 것이다. Context API를 사용한 전역 상태 관리 흐름 이해하기 일반적인 전역 상태 관리 흐름 최상위 컴포넌트인 App의 state에 넣어서 관리한다. 문제점 : 다루어야 하는 데이터의 중복값이 늘어나므로 유지보수성이 낮아질 가능성이 있다. 리액트 v16.3 업데이트 이후에는 Context API가 많이 개선되었기 때문에 별도의 라이브러리를 사용하지 않아도 전역 상..

비동기 작업의 이해 동기 vs 비동기 동기(synchronous) - 동기는 데이터의 요청과 결과가 한 자리에서 동시에 일어나는것을 말함 - 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결과가 주어져야 함 비동기(Asynchronous) - 비동기는 동시에 일어나지 않음 - 요청한 결과는 동시에 일어나지 않을 것이라는 약속 동기와 비동기의 장단점 동기 장점 : 설계가 매우 간단하고 직관적 단점 : 결과가 주어질 때까지 아무것도 못하고 대기해야함 비동기 장점 : 요청에 따른 결과가 반환되는 시간 동안 다른 작업을 수행할 수 있음 (자원을 효율적으로 사용 가능) 단점 : 동기식보다 설계가 복잡 웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있다. ( 예 : 서버쪽 데이터가 필요해 Aj..

const object = { somewhere: { deep: { inside: 3 ... } ... } ... } // inside값 변경 const nextObject = { ...object, somewhere: { ...object.somewhere, deep: { ...object.somewhere.deep, inside: 4 } } } 위 처럼 객체의 구조가 깊어지면 불변성을 유지하면서 이를 업데이트하는 것이 매우 힘듭니다. 이렇게 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트해 줄 수 있습니다. immer를 설치하고 사용법 알아보기 프로젝트 준비 $ yarn create react-app immer-tutorial $ cd immer-tutorial $ ..

많은 데이터 렌더링하기 아래의 코드를 작성하여 랙(lag)경험할 수 있도록 많은 데이터를 렌더링해봅시다. function createBulkTodos() { const array = []; for (let i = 1; i { const [todos, setTodos] = useState(createBulkTodos); const nextId = useRef(2501); (...) }; 이 때, 해당 코드에서 주의할 점은 useState의 기본값에 함수를 넣어 주었다는 것입니다.useState(createBulkTodos)라 작성하면 컴포넌트가 처음 렌더링될 때만 함수가 실행됩니다. useState(createBulkTodos())라 작성하면 리렌더링될 때마다 함수가 호출되지만 useState(create..