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이라고 한다. 각 과정마다 호출되는 함수들을 이용해서 특정 시점에 원하는 동작을 하도록 구현이 가능하다.