React

리액트는 페이스북에서 개발한 오픈소스 자바스크립트 라이브러리이다. 프론트엔트 개발에서 많이 사용된다.

과거의 웹 사이트는 페이지를 옮길 때 마다 모든 페이지를 불러와야 했다. 이는, 많은 트래픽과 사용자의 경험을 저하시켰습니다.

리액트 프로젝트에서 Link 대신에 NavLink를 사용함으로써, active한 Link에 스타일을 적용시킬 수 있다. 이를 통해서, 클릭된 링크의 배경색을 바꾸는 등의 스타일의 적용이 가능하다.

history를 통해서 React 프로젝트에서 뒤로가기, 앞으로가기와 같은 기능을 쉽게 구현할 수 있다. useHistory라는 Hook을 이용하면, 더 유용하게 이를 구현할 수 있다.

State는 컴포넌트 내부에서 변할 수 있는 값을 의미한다. props는 외부에서 받은 값으로, 변하지 않는 데이터이다.

자바스크립트에서 어떤 함수는 실행시 함수 외부의 환경에 영향을 줄 수 있다.

효율적인 CSS작업을 위해서 구조화된 CSS의 필요성이 대두되었다. 기존의 CSS 작성은 일관된 패턴이 없고, 모바일이나 태블릿같은 다양한 환경에서의 웹사이트가 생겨남에 따라 CSS가 너무 복잡해져, 구조화된 CSS가 필요하게 되었다.

Styled Component는 CSS-in-JS 라이브러리이다. 컴포넌트를 기반으로 CSS를 작성할 수 있게 하여 재사용성과 효율성을 극대화한다.

리액트에서 DOM 앨리먼트의 주소값을 활용해야 하는 경우, useRef가 필요하다. focus, text selection, media playback, 에니메이션의 적용이나 d3.js, greensock 등과 같은 DOM 기반 라이브러리 활용할때

프론트엔드 개발에서 상태는 변하는 데이터로, 특히 UI나 프론트엔드 개발에서는 동적으로 표현될 수 있는 데이터를 의미한다. 상태관리의 주요원칙을 잘 따른다면, 컴포넌트간 서로 느슨하게 결합(loose coupled)되고, 구조적으로 아름다운 코드를 작성할 수 있다.

React에서 컴포넌트는 항상 바깥에 하나의 태그로 감싸져 반환되어야 한다. React.Fragment를 사용하면 DOM에 별도의 노드를 추가하지 않고 여러 자식 노드를 그룹화할 수 있다.

Redux는 자바스크립트 어플리케이션에서 예측 가능한 상태의 관리를 해주는 container이다. 상태 관리를 위한 전역 상태의 저장소를 제공한다. Redux는 react의 하위 라이브러리가 아니고, 자바스크립트 어플리케이션이라면 사용이 가능하다.

기본적으로 redux는 async await를 사용할 수 없다. 따라서, redux에서 비동기로 API 요청을 받아 데이터를 store에 저장하기 위해서는 redux-thunk 미들웨어 라이브러리를 사용해야 한다.

리액트 버전 18에 와서 평소처럼 npm run start를 했는데, 처음 보는 에러 메세지가 콘솔창에 나타났다.

많은 데이터를 보여줘야 할 때, 가독성을 위해서 페이지를 나눠야할 필요가 있을 수 있다.

랜더링의 최적화를 위해서 사용되는 useCallback은 이미 랜더링되었던 동일한 함수라면, 다시 함수가 선언되지 않는다.

React Query를 사용하는 법을 간단히 알아보고, React Query를 통해서 서버의 최신 데이터를 실시간으로 받아오는 코드를 작성해보았다.

Redux Toolkit을 사용하여 redux를 쓰는 방법을 간단하게 알아보았다.

리액트 프로젝트에서 eval을 사용해보려고 하니, ESLint에서 no-eval 경고 메세지를 띄웠다.

react query에서 단순한 조회, get 요청을 보내기 위해서는 useQuery를 사용한다. 반면, 데이터의 수정이 일어나는 Post, Delete, Patch(Put) 요청을 위해서는 useMutation을 사용해야 한다.

간단하게 리액트 커스텀 훅을 사용해보기로 하였다.

styled-components를 사용하면서, createGlobalStyle를 사용하게 되었는데, 문득 이를 사용하면 손쉽게 다크 모드를 설정할 수 있지 않을까 하는 생각이 들어서 직접 다크 모드를 구현해 보았다.

자신이 짠 코드라도, 시간이 지난 뒤에 보면 이게 무슨 코드지? 하는 생각이 들 때가 있다. 하물며, 다른 사람이 내 코드를 보는 것은 어떨까? 그렇기에, 최대한 깔끔한 코드와 프로젝트를 위해서 내가 알아낸 방법을 남기고자 한다.

댓글을 삭제한 뒤 해당 댓글이 삭제된 페이지를 다시 렌더링한다. 이 경우, delete 요청을 보내고 다시 get 요청을 보내 댓글의 목록을 받아와야 할까?

React를 사용하여 SSR(Server-Side Rendering) 및 정적(Static) 웹사이트를 구현하기 위한 웹 프레임워크이다.

리액트는 특징적으로 Virtual DOM을 사용한다.

React의 가장 큰 특징은 Virtual DOM의 사용이다.

useState는 비동기로 작동한다. useState가 비동기로 작동하지 않았다면, 렌더링이 너무 자주 일어나는 문제가 발생했을 것이다.

useReducer, useLayoutEffect 훅에 대해서 알아본다

ContextAPI를 사용하여 추가적인 라이브러리 설치없이 전역 상태를 관리할 수 있다.

Recoil은 상태 관리 라이브러리로 facebook에서 react 전용으로 만들어졌다.

리액트의 컴포넌트 props는 children이라는 값을 가진다.

useEffect와 setInterval을 사용하여 timer를 만들 수 있다.

PropTypes를 통해서 react 개발환경에서 타입을 체크할 수 있다.

useEffect 함수를 사용하면서 내부에서 비동기 호출이 필요한 경우가 있다. 이때, async 함수를 사용하는 법을 알아보자

useEffect를 사용할 때 메모리 누수가 발생할 수 있다. 이때 어떻게 해야할까?

UX 향상을 위해서 여러가지 고려할 요소가 많다. 예를 들면, input 태그에서 입력 후 사용자들은 자연스럽게 엔터키를 누르게 된다. input태그에서 enter키를 눌렀을 때 이벤트가 발생하게 하기 위해서는 onKeyDown과 onChange를 활용해야 한다.

페이지를 이동시키면서 state를 전달하는 방법에 대해서 알아보았다.

HashRouter는 BrowserRouter가 있기 이전에 많이 사용되었다. HashRouter를 사용하면, 주소에 #이 붙게 되고 이로인해 SEO에 대응되지 않는다. 또한 HashRouter는 History location을 지원하지 않는다.