React - framework & 핵심요소(Component, JSX, props, status

카테고리 없음

코딩펭귄 2024. 5. 14. 09:10

- Open-source javascript framework

- SPA(Single Page Application) 개발 프레임워크 => 하나의 페이지에서 모든걸 컨트롤 함

SPA vs MPA

SPA

- WebApp이 하나의 페이지로만 구성된 것

- 화면의 요청이 있을 때 마다(URL) 바뀌는 컴포넌트(=data box, div) 만 갱신

- single page application -> 페이지는 1개 -> 페이지는 그대로 있고, 그 안의 데이터만 바꿔주는것

MPA

- Web Application (WebApp) 이 여러 개의 페이지로 구성된 것.

- 화면의 요청이 있을 때 마다(URL) 새로운 페이지를 응답 + 페이지를 갱신 할 때마다 불필요한 Data-Load가 발생

React 핵심요소 : Component, JSX, props, state

- 리액트를 구성하는, 가장 기초적 & 핵심적인 요소

- 화면의 UI를 구성하는 함수(HTML의 Div, Section, Main, Article 등을 컴포넌트로 대체함)

- 컴포넌트를 재사용함으로써 코드작성시간 단축

리액트 컴포넌트

- JSX(javascript + xml)문법으로 생성된 html element에 대응하는 모듈

- 리액트에서 HTML Elemeent는 첫글자를 소문자로 작성함

- 리액트 컴포넌트는 첫 글자를 대문자로 작성

<div> : html 태그 ||| <Div> : 컴포넌트

function App() {
  return <div>This is a Component!</div>;
}
export default App;

-> 컴포넌트 이름(App)은 대문자로 시작

& 컴포넌트는 함수로 정의 & 컴포넌트를 외부에서 사용하려면 반드시 노출시켜야됨(export)

Reacct의 관례상, App.js의 App 컴포넌트는 Root Component가 됨

-> Root Component는 index.js에서 호출해야됨

- XML 같은 문법을 사용하는 ECMAScript의 확장

- 컴포넌트 렌더링을 구조화하는 방법 제공 (함수에서 태그들을 반환시키는 방법을 말함)

- 컴포넌트를 구성하는 함수 내에서 HTML 코드와 Javascript 코드를 동시에 사용한다.

JSX 규칙들

1. JSX의 모든 태그는 종료 태그가 필수 (안닫히면 에러남)

2. JSX는 하나의 태그만 반환시켜야됨 -> 두개이상 태그 반환시키고 싶다면 빈 태그( <></> )로 여러태그 감싸기

3. 여러줄의 태그를 반환할 경우 괄호 () 로 감싸기 -> prettier이 자동으로 해주긴 함

4. {} 를 사용해 인터폴레이션 함 (데이터를 표현할 때 그냥은 작성할 수 없고, 반드시 {}를 이용해서 해야됨 -> 변수, 상수, 함수, 스크립트, 주석 등을 작성 )

5. Event Handling을 Camel Case로 작성한다

html: onclick =>  React: onClick
html: onkeyup => React: onKeyUp

6. 클래스 지정은 className으로 한다

7. label for=""는 label htmlFor=“” 로 한다

- 부모컴포넌트에서 자식컴포넌트로 데이터를 전송하는 방법

- 값, 변수, 상수, 함수 등을 컴포넌트로 전송할 수 있다. (only 읽기 전용)

- 상위 컴포넌트에서 -> 하위 컴포넌트로만 전송할 수 있다. (반댄대는 불가능)

- HTML 태그 묶음 또는 컴포넌트도 전달(=컴포넌트 합성) 할 수 있다.