Front-End/React

[React] Router

라우팅이란? 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 즉, 다른 경로(URL 주소)에 따라 다른 View(화면)을 보여주는 것이다. 리액트 자체에는 이러한 기능이 내장되어 있지 않기 때문에 "페이지 이동"이라는 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다 이런 이유 때문에 리액트는 Framework가 아닌 Library로 분류된다 리액트 라우터 (React Router) 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다 React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 URL에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해 주는 라이브러리 라고 볼 수 있다 설치 npm i..

[React] React-Query

React-query 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용 사용하는 이유 react-query를 사용함으로 서버, 클라이언트 데이터를 분리 장점 서버 데이터 캐싱 데이터 패칭 시 로딩, 에러 처리를 한 곳에서 처리 가능 prefetching, retry 등 다양한 옵션 쉬운 상태 관리 get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행 데잍가 오래 되었다고 판단되면 다시 get 동일 데이터 여러번 요청하면 한 번만 요청 무한 스크롤 비동기 과정을 선언적으로 관리할 수 있다 React Query의 라이프 사이클 fetching - 데이터 요청 상태 (요청을 수행하는 중인 쿼리) fresh - 데이터가 프레시한..

[React] useEffect와 Side Effect

Rendering in React React에서 함수 컴포넌트의 rendering이란 state, props를 기반으로 UI 요소를 그려내는 행위 렌더링의 결과물은 UI 요소, 즉, 화면에 JSX 문법으로 무엇이 나타날지를 적어둔 컴포넌트들 그러한 렌더링 결과물에 영향을 주는 요소가 state와 props Side Effect Side Effect는 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 즉, React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들이라고 볼 수 있다 코드 예시 let count = 0 function greetWithSideEffect(name) { // Input count = count + 1 // Side ..

[React] map 함수 적용시 key props를 부여하는 이유

Key React에선 기존에 한땀한땀 작성해야했던 배열을 map()이라는 함수를 이용해 element list로 반복 실행할 수 있다 key는 react가 어떤 항목을 변경, 추가 , 삭제할지 식별하며 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트로 지정해야 한다. 왜 필요할까? 위에서 언급했던 map이라는 함수로 요소를 하나하나 뿌려준다고 가정하자 리액트는 내용이 바뀔 때 즉, state값이 바뀔 때 마다 다시 랜더링을 하는데 10개의 리스트 중에 하나의 리스트만 바뀌었다면 리액트가 하나씩 리스트를 읽다가 어디서 달라졌는지 파악하고 전체를 재렌더링 한다. 그걸 방지하기 위해 각각의 요소들이 고유한 정체성을 가지도록 key값을 부여하는 것이다 그러면 리액트는 key값으로 변한 내용인지,..

[React] Hooks

Hooks Hooks은 리액트 v16.8에 새로 도입된 기능으로 함수 형태의 컴포넌트에서 사용되는 몇 가지 기술을 Hook이라 부른다 Hooks은 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState & 렌더링 직후 작업을 설정하는 useEffect등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 만일 앱을 react hook을 사용하여 만든다면 class component. render 등을 안 해도 된다는 뜻이다 즉, 모든 것은 하나의 function 함수형 프로그래밍이 가능해진다는 것이다 Why?? 왜 굳이?? 굳이 잘 쓰고 있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꾸는 이유는 클래스는 react를 배우는 데에 있어서 큰 진입장벽이었다..

[React] Props & State

State State란 말 그대로 컴포넌트의 상태 값이다 State와 Props는 둘 다 object 이거, 화면에 보여줄 정보 즉, 상태를 가지고 있다는 점에서 서로 비슷한 역할을 한다. props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고 (함수의 parameter 처럼) 읽기전용이다. state는 컴포넌트 내에서 정의하고 사용하며 업데이트 할 수 있다 state는 변수 대신 쓸 수 있는 데이터 저장공간이다. useState()를 이용해 사용해야한다 useState[a,b]에서 a는 state 데이터, b는 state 데이터 변경 함수이다 state에 데이터를 저장해놓는 이유 웹이 앱처럼 동작하게 만들고 싶어서 state는 변경되면 HTML이 자동으로 재렌더링 된다 HTML이 새로고침..

[React] React?

Why React? 2013년 Facebook에서 개발한 JavaScript Library “지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것"을 목푤로 개발 Angular, Vue 등의 다른 프레임워크와는 달리 리액트는 오로지 View만 담당하는 라이브러리 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리 (ex. react-router-dom, redux)를 함께 사용한다 자기만의 문법을 가진 Angular, Vue와 달리 자바스크립트 문법을 그대로 사용 오픈소스 프로젝트이면서 페이스북의 지속적인 관리가 이루어지고 있음 많은 사용자수를 기반으로 생태계가 활성화 되어있음 컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있음 React Navtive 등의 웹이 아닌 플랫폼에..