React, React란

React

 

리액트 공식 홈페이지: https://react.dev/

 

 

 

 

UI(사용자 인터페이스)를 구축하기 위해 메타에서 개발한 Javascript 기반의 라이브러리

 

SPA(Single Page Application)는 한 페이지에 다 불러들인다.

화면상에 데이터가 변경되는 경우 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 렌더링할 수 있다.

웹 앱(web App), 네이티브 앱(Native App) -> 휴대폰

 

리액트 컴포넌트

 

div의 한 조각들, UI를 구성하는 조각에 해당하며, 도깁적으로 분리되어 재사용이 됨을 목적으로 사용된다.

React 앱에서 컴포넌트는 개별적인 JavaScript 파일로 분리되어 관리한다.

 

클래스 컴포넌트, 함수형 컴포넌트가 있는데 요즘은 함수형 컴포넌트로 많이 사용한다.

클래스 컴포넌트 -> class 함수명 extends Component{ }

함수형 컴포넌트 ->

 

JSX : Javascript + XML

HTML과 유사(HTML과 같은거는 아님)

return문으로 반환하는 문법

Babel과 같은 변환기가 있어야된다.

 

규칙

 

태그는 반드시 닫아줘야한다.

반드시 div로 감싸주어야한다.(Fragment 사용, <></> 상황에 따라) - div를 너무 많이 사용하다보니 쓰게 됨

자바스크립트 값을 사용하고 싶을 때는 {}를 사용한다. // `${}`

&&연산자나 삼항연산자를 사용한다. -> if문 쓰지 말라는 얘기

인라인 스타일링은 항상 객체형식으로 작성

별도의 스타일 파일을 만들었으면 class 대신 className을 사용(권장)

주석 {/**/} -> <div>안에서