[TIL] Day46 - 리액트 React 1

React 웹 프레임워크

자바스크립트 라이브러리의 하나이다. 

싱글 페이지 어플리케이션 SPA 및 모바일 어플리케이션 개발에 사용할 수 있다.

컴포넌트 안에서 렌더링하는 방식을 사용한다.

 

동작원리

상속구조로 만들어진 컴포넌트를 렌더링을 순차적으로 실행한다.

• 초기 렌더링
• 가상 DOM 변경 : 렌더링 > HTML 렌더링 > DOM 에 주입 > 브라우저
• 재조정
• 실제 DOM 업데이트

DOM : Document Object Model : HTML의 구조

가상 DOM tree : 컴포넌트가 업데이트가 되면, 최소한으로 연산해서 변화된 부분만 업데이트를 하는 방식이다.

> 실제 DOM에 적용해서 업데이트를 한다 : 화면 깜빡임 발생

 

CRA - 타입스크립트

Create React App : `npx create-react-app 폴더명` `npm start`

CRA 타입스크립트 : `npx create-react-app 폴더명 --template typescript`

차이점 ?  확장자 js > tsx

 

CRA- ts 코드 구조 분석

div root 가 동작하는 구조를 컨트롤한다.

개발자 도구 요소에서 DOM 구성요소(body)를 보여준다.

 

웹페이지에서 처음으로 호출하는 파일은 `index.tsx` > root.render 함수로 <App /> 파일 호출해서 띄운다.

 

jsx - tsx

리액트 `className` =/= html `class`

 

//js
return React.createElement(
    "div",
    null,
    "Hello",
    React.createElement("p", null, "방가")
  );
//jsx
return (
    <div className="App">
      Hello
      <p>방가</p>
    </div>
  );

react에서만 사용하는 언어 타입 `jsx`

기존 js 문법을 좀더 쉽게 작성한 형식이다. 단 리턴문 안에 최상위 부모로 감싸주어야 한다.

 

css > `.App{ text-align:center; }`

`padding` : content와 border의 거리

 

jsx : return 뒤에 `{변수 or 삼항연산자 등}` 중괄호로 사용 할 수 있다.

`{name === "리액트" ? <h1>yes</h1> : null}`

undefined 일때 `{port || 'default포트번호}`

 

inline styling 인라인 스타일링

리액트 돔요소 스타일 적용시 > 객체로 적용해야 한다. js 파일 안에 스타일 태그 지정하는 방법

const style = {
    backgroundColor: "black",
    color: "white",
    fontSize: "39px",
    fontWeight: "bold",
    padding: "20px",
  };

  return (
    <div
      style={{
        backgroundColor: "skyblue",
        color: "black",
        fontSize: "39px",
        fontWeight: "bold",
        padding: "20px",
      }}
    >
      <h1 style={style}>Hello {name === "리액트" ? <h1>yes</h1> : null}</h1>

 

`<br/>` `<input />` 기존에는 안닫아줘도 동작했지만, 리액트에서는 닫아줘야 에러나지 않는다. self closing

 

jsx 주석 작성 : 함수나 컴포넌트에 대한 설명, 참조 `ctrl + /`

`{/* 작성자 : dah, 작성일 : yyyy.mm.dd, 내용 : 기능에 대한 내용 */}`

 

📝 리액트 언어 개요 정리

CRA 개발에 사용하며, 가상 돔 Virtual Dom 을 사용한다.

CRA-ts 설치하고, app.tsx 를 사용한다.

index.html > index.js > app.tsx 로 흐름이 진행된다.

 

className 태그를 사용한다.

br, input 태그는 닫아야 한다. self closing

주석은 {/* */}

 

- css 작성방법 .container { text-size:'10px';}

- 인라인 스타일링 textSize:'10px',

 

☑️ 배운 점

CRA -ts로 시작하는 방법 npm create-react-app --templete typescript

#가상 DOM