11주차-파트03: 리액트 개념, jsx 문법

CHAPTER 1. 리액트란?

✔️리액트

웹 프레임워크이다. React.js는 자바스크립트 라이브러리의 하나이다. 싱글페이지 어플리케이션(spa) 및 모바일 어플리케이션 개발 가능

 

 

리액트의 동작 원리

• 초기 랜더링 : 초기에 보여지는 화면
• 가상 DOM 변경 : 트리에서 변경된 부분이 생겼을 때 이전 랜더 함수가 만들었던 컴포넌트 정보와 현재 랜더 함수가 만든 컴포넌트 정보를 최소화된 연산으로 비교하여 둘의 차이를 알아낸 후 변화된 부분만 업데이트 한다.
• 재조정
• 실제 DOM 업데이트

---

 

리액트 설치

vsCode 터미널 창에서 다음 명령어를 쳐서 리액트를 설치한다 리액트 기반으로 하는 my-app프로젝트를 만든다.

npx create-react-app my-app

 

 

설치가 완료되면 다음 명령어를 쳐서 프로젝트 안으로 들어갈수 있다..

cd my-app
npm start

 

리액트를 이용해 타입스크립트 기반의 프로젝트를 만들어보자.

npx create-react-app todolist --template typescript

todolist프로젝트가 생성되었다

 

 

아까와 똑같이 다음명령어를 이용해 프로젝트 안으로 들어가보자.

cd todolist
npm start

 

 

 

 

CHAPTER 2. jsx문법

 

반드시 최상위 부모태그가 있어야 한다.  주로 <div></div> 태그나  <></> 태그를 쓴다.

 

 

App()함수에서 return 안에는 html코드를, 밖에는 자바스크립트 코드를 쓸 수 있다.

 

 

jsx내부에서 자바스크립트 코드를 표현하고 싶다면 중괄호{}를 이용한다.

밖에서 name변수에 문자열을 정의하고 해당 문자열이 화면에 출력되도록 해주었다.

 

조건연산자를 이용해 변수명에 따라 출력되는 값이 달리지도록 해보자. 만약 아무것도 출력하고 싶지 않다면 null을 사용하면 된다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  let name = "멍멍이";
  return (
    <div className="container">
      <h1 className='test'>하이{
        name === "멍멍이"? (<h3>갓댕이</h3>):(<h3>고양이</h3>)
        }</h1>
      <p>반갑습니다</p>
    </div>
  );
}



export default App;

 

🌱jsx에서의 inline styling

function App() {
  let name = "멍멍이";
  const style = {
    backgroundColor : 'black',
    color : 'white',
    fontSize : '48px',
    fontWeight : 'bold',
    padding : '20px'
  };
  return (
    <div style = {style}>
      <h1 style = {style}>하이{
        name === "멍멍이"? (<h3>갓댕이</h3>):(<h3>고양이</h3>)
        }</h1>
      <p>반갑습니다</p>
    </div>
  );
}

 

jsx에서는 반드시 닫는 태그를 써야한다.

<br/>
<br></br>
<input/>

 

🌱jsx의 주석

ctrl + /  단축키로 주석을 설정/해제할 수 있다.

{/*주석문을 작성합니다*/}

{/*
	작성자 : 아무개
  작성일 : 2024/11/01
  내용: 기능에 대한 내용    
*/}