React (7) 썸네일형 리스트형 [Typescript] 타입스크립트, 왜 쓰는가? 자, 이제부터 타입스크립트에 대해 공부하기로 해보자. 타입스크립트란? 타입스크립트는 자바스크립트의 슈퍼셋( superset)인 오픈소스 프로그래밍 언어이다. 슈퍼셋이라고 하면 어렵게 느껴질텐데 자바스크립트의 장점 + 단점을 보완하여 만든 언어라고 이해하면 된다. ( Typescript == Javascript + type ) 참고로 타입스크립트 파일은 컴파일 단계 혹은 바벨에서 자바스크립트 소스코드로 변환 후 출력 된다. Javascript Typescript 동적타입 언어 정적타입 언어 인터프리터 언어 컴파일 언어 독립적으로 사용가능 자바스크립트에 의존적임 (자바스크립트로 컴파일된 후 실행) 좀 더 유연함 (타입에 제한을 받지 않으므로) 더 나은 구조와 간결함, 일관성, 재사용성 .js 확장자 .ts .. [React] react-query 파헤치기 웹 페이지를 보면 큼직한 레이아웃을 제외하고는 전부 백엔드로부터 받아오는 데이터를 화면에 표현하는 것일 거다.(물론 그렇지 않은 웹페이지들도 존재한다.) 그럼 데이터는 항상 백엔드에게 다시 요청해야할까? 정답은 NO ! 상태 관리 라이브러리(Redux, Recoil, Mobx 등)로 중복되는 데이터 요청에 한해서는 효율적으로 관리가 가능하다(전역 상태 관리로 props drilling도 피할 수 있다). 모두 훌륭한 라이브러리지만 백엔드 데이터들을 관리하기에는 적합하지 않은 점들이 있다. 그렇다면 상태관 리를 효율적이게 하면서 동시에 백엔드 데이터를 관리하기에도 용이한 라이브러리는 없을까? React-query란? React-query는 React Application에서 데이터 관리와 상태 관리 두마리.. [React] state 최적화를 해보자 (랜더링 최적화, memoization) 들어가기에 앞서, React를 사용하다보면 state를 알게되고 useState를 사용하여 쉽게 화면을 동작할 수 있다는 점에 신났을 거다. 그러다보면 state가 곧 변수가 되고, state 남발로 필요 이상의 비용이 발생하고 있었다는 점을 뒤늦게 깨닫는다. 이 게시글이 눈에 들어오는 지금! 이 맘때가 딱 깨닫고 신경써서 개발하려는 시기일 것이다 :) state나 hooks에 대한 개념은 [React] 리액트 State와 Hooks란 무엇인가?를 읽고 오면 도움이 될 것 같다. 컴포넌트가 리랜더링 되는 조건 >> 전달받은 props가 변경될 때 >> 부모 컴포넌트가 리랜더링될 때 >> 자신의 state가 변경될 때 리랜더링을 하면 컴포넌트를 reflow + repaint함에 따른 브라우저 성능 저하가 .. [React] 리액트 State와 Hooks란 무엇인가? React에서 state란? 리액트에서 state는 이벤트에 의해 변경되는 값이다. state는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하거나 화면에 변경사항을 표시하기 위해 사용한다. 이는 개발자가 의도한 동작에 의해서 변경될 수도 있고, 사용자에 의해 변경될 수도 있다. state가 변경되면 리액트가 자동으로 변화를 감지하여 변경된 부분을 리랜더링한다. state 값을 바꾸기 위해서 우리는 set함수를 통해 값을 변경한다. 이때 반드시 set함수를 통해서만 변경을 해야하고 일반 변수의 업데이트 방식으로는 재할당이 불가하다. 만약 일반 변수처럼 값을 직접 변경하게 되면 React가 Component를 다시 랜더링 할 타이밍을 알아차리지 못하게 되니 꼭! set함수를 통해서 변경하도록 하자... [React] react-router-dom v6 동작원리 react-router-dom은 리액트를 사용하는데 있어 바뀌는 주소에 따라 보여질 컴포넌트를 정할 때 당연하게 사용되어진다. 라이브러리라고는 인지하지 못할 정도로 밀접하고 자연스레 사용되어지는 react-router-dom에 대해 알아보자 🙂 react-router-dom이란? 페이지를 새로 불러오지 않고 각 상황에서 선택된 데이터를 하나의 페이지에서 랜더링해주는 라이브러리이다. MPA로 웹페이지를 구현할 때는 각각의 주소에 맞는 html 파일을 보여주면 되었지만, 대표적인 SPA인 리액트에서는 페이지 전환을 표현하기 위해 react-router-dom이 필요하다. (실제 페이지 이동이 아닌 각각의 페이지에 필요한 컴포넌트들을 불러와서 보여주는 것이기 때문에 '페이지 전환을 표현한다'라고 적어놨으니 참.. [React] Code splitting, Lazy loading, Suspense Code splitting (코드 분할) 코드 분할(코드 스플릿팅)이란? webpack, rollup, browserify과 같은 번들링 tool을 이용하여 만들어진 하나의 번들 파일을 여러 개의 번들 파일로 나누는 것을 의미한다. 참고로 CRA를 하면 이미 App 자체에 webpack이 설치되어 있다. 코드가 길어지고 애플리케이션이 무거워지면 브라우저 성능에 영향을 미치게 된다. 이때 번들러를 통해 여러 개의 번들 파일로 나누어 로딩하면 더 빠른 속도로 화면 로드가 가능해진다. 코드를 분할하는 기준은 각 프로젝트마다 달라지는데, 라우트 이동에 따라 불러오는 컴포넌트를 기준으로 Chunk를 나눌 수도 있고, api 호출하는 기준으로 나눌 수도 있다. 공식 문서에서는 route가 코드 분할을 설정하기 가장.. [React] Virtual DOM(가상돔)과 Rendering(랜더링) 가상돔을 알아보기 전에 DOM이란? Document Object Model의 줄임말로 '문서 객체 모델'을 의미한다. 여기서의 문서 객체는 XML이나 HTML 문서에 접근하여 읽고 컨트롤할 수 있도록 API를 제공하는 일종의 인터페이스로 이해하면 된다. 즉, 자바스크립트와 같은 스크립팅 언어가 페이지에 접근하여 조작할 수 있게 연결시켜주는 역할이다. DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이다. 따라서 HTML DOM Tree로 부르기도 한다. 가상돔이란? 실제 돔에 접근하여 조작하기보다 이것을 추상화 시킨 자바스크립트 객체라고 이해하면 된다. 쉽게 말해 실제 돔의 사본이라고 이해하면 된다. 리액트에서의 Vi.. 이전 1 다음
