React Router는 단일 페이지인 React 프로젝트에서 라우팅을 구현하기 위한 라이브러리이며, 그래서 React로 App을 만들 때 필수적으로 사용해야 한다. 그런데 왜 React는 단일 페이지로 App을 렌더링하며, 라우팅이 필요한 것일까? 라우팅을 왜 신경써서 구현해야 할까? 다른 블로그나, 커뮤니티에선 '어떻게 라우팅을 구현'할지는 많이 알려주지만, 왜 필요한 것인지, 왜 신경써야 하는지는 비교적 정보가 적을 것이다. 나 또한, 아무것도 모를 때 이런 의문을 가졌기에, 오늘은 이 둘을 다뤄보고자 한다. 왜 React는 따로 Router가 필요한가? ![](https://velog.velcdn.com/images/heebeom/post/6e86fd03-384f-4ef6-ab1c

본 포스팅은 Udemy의 'React 완벽 가이드' 강의를 듣고, 배운 내용을 기반으로 '제 생각'을 정리한 글입니다. > > 틀린 부분이 있을 수 있으니 참고로만 봐 주시고, 틀린 점은 지적해주시면 감사하겠습니다. React는 Web에 대해서 모른다. React는 사용자 인터페이스를 구축하기 위한 Javascript 라이브러리다. 즉, React의 주요 역할은 컴포넌트와 State를 관리하는 것이라 볼 수 있다. 이 말의 요지는, React는 UI를 직접 HTML에 보여주는 역할을 수행하지 않는다는 것이다. 그렇다면 어떻게 컴포넌트를 Web으로 보여줄까? 바로 React-DOM 라이브러리다. React-DOM은 React가 Web과 통신할 수 있게 해주는 인터페이스 역할을 해준다. React가 React-DOM에 변경사항을 알린다. React가 어떻게 컴포넌트의 변경사항을 React-DOM에 알릴까? 요지는, React는 아

Context API란? > context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. > > 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다. > React 공식 문서 - Context 발췌. React 공식 문서에 따르면, 데이터를 Props로 넘기는 대신, 간편하게 데이터를 컴포넌트 전체에 제공할 수 있는 기능이라고 한다. 한번 예시를 들어 알아보자. ![](https://velog.velcdn.com/images/heebeom/post/7fb16faa-9f0

Reducer란? > * useState같이 state관리를 도와주는 Hook이며, useState보다 강력하다. > * 특히 여러 state와 연관된 state 등, 복잡한 상태 관리에 사용한다. > * 강력하지만 사용하기 복잡해, 일반적인 상태는 useState를 사용하는 게 좋다. Reducer를 사용할 때? 위 코드는 emailIsValid를 설정하기 위해, 다른 state인 enteredEmail를 참조하고 있다. 이 경우, React의 State 업데이트 정책에 의해 enteredEmail가 최신값이 아닐 수 있다. React는 State의 업데이트가 필요할 때, 여러 개를 묶어서 비동기적으로 처리한다. 만약 컴포넌트의 규모가 크면, 수많은 stat

useEffect란? React Hook 중 하나로, 사이드 이펙트를 처리하기 위한 함수이다. 인수로 실행할 함수, 의존성 배열을 받는다. 다음의 조건을 만족할 시, 인수로 받은 함수가 실행된다. 상위 컴포넌트가 처음 mount 되었을 시 의존성 배열 요소의 값이 변경될 때 React의 사이드 이펙트란? React의 주요 역활은, UI를 렌더링하고, 유저 동작에 의해 반응하는 것이다. JSX 요소를 검증하고, 렌더링하기 State와 Props를 관리하기 사용자 이벤트를 처리하고, 반응하기 그 외 애플리케이션에서 일어나는 모든 기능을 사이드 이펙트로 분류한다. 백엔드에 http 리퀘스트 보내기

ref란? ref는 React와 DOM을 연결하는 역할을 한다. ref의 current 속성에 DOM 요소를 직접 반환한다. 사용자는 pure javascript 처럼 DOM의 요소에 직접 접근할 수 있다. 즉, javascript의 document.getElementsById()와 비슷하다. 그렇다면 document.getElementsById() 같은 DOM API 쓰면 안될까? DOM API는 전역적으로 동작해서, 같은 id를 가지는 DOM 요소가 여러개 생길 수 있다. ref는 컴포넌트 안에서만 동작하기 때문에 안전하다. ref는 언제 사용할까? React가 '도저히' 할 수 없는 일을 할때, 신중하게 사용한다.

이전에 React로 개발한 사무소 웹 페이지를 Refactoring 하기 위해, 새로 React 강의를 찾게 되었다! Udemy의 react 완벽 가이드 with redux next.js typescript 강의인데, 인터넷에서 평도 좋고 내가 원하는 hooks, 상태 관리 등의 심화 개념까지 다루고 있어 수강하게 되었다. (가격도 저렴한 게 좋았다!) 강의를 전반적으로 살펴보고, 내가 이전에 미처 발견하지 못했던 내용들을 정리해 간단히 공유하고자 한다. 차세대 JavaScript 새로운 언어가 아닌, 기존 자바스크립트 작성에 도움을 주는 개념들이다. 깔끔하고 강력한 리액트 앱을 작성할 수 있게 해