React

리액트는 무엇인가?

React를 시작하기 위해 먼저 VSCode에 개발환경을 세팅해야한다.

👉 디렉토리 기본 구조 새 페이지를 넘어갈 때마다 정보를 가져오지 않아도 된다는 장점이 있다

컴포넌트 - 화면에서 UI 요소를 구분하는 최소 단위

다른 개발 언어와 다르게 리액트에서는 컴포넌트를 통해 props 인자와 state를 활용하여 데이터를 받아오고 수정을 한다는데 어떻게 활용하는지 더 자세하게 알아보도록 하자✏️

React는 Node.js(서버)와 연동하기 위해서 개발툴에 세팅을 해야한다.

React에서는 배열 안에 있는 데이터를 어떻게 가져오는걸까??

HTML에서 input에 포커스 주거나 스크롤 박스 조작하거나 Canvas 요소에 그림을 그리는 등 특정 DOM에 직접적으로 건드려야 할 때는 id를 사용하여 DOM에 이름을 달지만,React는 ref (reference)를 이용해서 이름을 달 수 있다.

지금까지 우리가 알아본 Component 에서 데이터 전달할 때 Props를 통해 무조건 상위에서 하위로 내려가는 단방향으로 데이터를 전달했었다.하지만 전역 데이터에서 이렇게 보낼려고 했을 때 한번씩 Component를 거쳐서 데이터를 전달하는 복잡함이 있다.

React 컴포넌트의 생성부터 소멸까지 이르는 일련의 과정을 생명주기 즉, Life Cycle이라고 한다. 각 과정마다 호출되는 함수들을 이용해서 특정 시점에 원하는 동작을 하도록 구현이 가능하다.

회사에서 기존 코드들을 참고하면서 개발할 때, Recoil 같은 상태 관리 라이브러리에서 사용하는 Hook들을 정리해둔 atom.js에는 주로 set 개념들로만 있었다.하지만 가끔씩 한꺼번에 초기화하고 싶을 때가 많았는데, 그 때도 복잡한 방식으로 set으로 다시 정의

React에서는 한 페이지에서 이동하는 구간이 많기 때문에 이동 경로를 정의내리는 것이 중요하다.이를 도와줄 패키지는 바로 React Router 이다.아주아주 간단한 샘플 페이지를 만들면서 페이지 이동 처리하는 방법에 대해 알아보쟝~하기에 앞서 먼저 Router 패키

react-scrollmagic 설치 과정에서 React 버전 충돌이 발생해 여러 번 버전을 바꿨었다.다운그레이드 하는 과정에서 VScode의 Terminal로 버전을 자주 변경해도 되는지 조심스러워 ChatGPT에게 도움을 청했다.ChatGPT 왈; 단순히 node_