[리액트] 컴포넌트 및 기초사항

 

📍리액트란

- 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용. 웹앱의 view를 개발 할 수 있도록 하는 라이브러리

- 리액트는 virtual DOM 을 사용해서 빠른 성능을 유지하도록 함. 이는 가상으로 존재하는 돔으로 자바스크립트의 객체이다. 

 

☑️DOM

- 먼저 DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리함

- 리액트는 이밴트가 발생 할 때마다 가상 돔을 만들고 다시 그릴 때마다 실제  돔과 비교하고 최소한의 변경사항만 실제 돔에 반영

 

📍컴포넌트 구조 기반

 

 - 리액트 컴포넌트(React component)는 리액트(React) 라이브러리에서 사용되는 재사용 가능한 UI 요소.

리액트는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 컴포넌트 기반 개발을 지원

 

-  각각의 컴포넌트는 자체적으로 상태(state)와 속성(props)을 가지며, 화면에 렌더링되는 UI 조각

 

- 컴포넌트를 import만 하면 됨 

 

 

📍컴포넌트 import

 

- 만약 파일 구조가 이런식으로 되어있다면

- App.js

 

 

 

 

📍props / state

☑️props

- 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터

 

☑️state

- 컴포넌트 내부에서 선언하며 내부에서 값 변경 가능 .

- 동적인 데이터를 다룰 때 사용

- 기본적으로 클래스형 컴포넌트에서 사용 가능, 하지만 hook 이용해 함수형 컴포넌트에서도 사용 가능

 

📍jsx

- 자바스크립트와 html  동시에 사용

- 자바스크립트의 변수들을 바로 사용 가능 

- 아래와 같이 자바스크립트에서 html 태그 사용 가능, 자바스크립트 변수를 html 태그에서 바로 호출하여 사용 가능 

const App = () => {
  const hello = 'Hello world!';
  return <div>{hello}</div>;  //자바스크립트 변수를 html 태그에서 바로 호출하여 사용 가능 
};