타입스크립트 기반 리액트

리액트란 무엇인가?

자바스크립트 라이브러리의 하나
사용자 인터페이스 만들기 위해 페이스북에서 개발
싱글페이지 어플리케이션(SPA) 및 모바일 어플리케이션 개발 가능
랜더링 : 화면 띄우기

리액트 동작 원리

초기 랜더링 : 초기화면 띄우기
가상 DOM 변경 : 실제 돔 복사한 환경. 화면 깜박임 없애기 위해
재조정
실제 DOM 업데이트

DOM(Document Object Model, 문서 객체 모델)
DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다. 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있다.

※ 랜더링된 화면이 브라우저에 나타나는 과정
랜더링 ➡️ html마크업 ➡️ DOM 주입➡️ 브라우저

프로젝트 생성

리액트 홈페이지 : https://ko.react.dev/
타입스크립트 기반 리액트 프로젝트 생성
- npx create-react-app todolist --template typescript
파일 구조 살펴보기
- index.html ➡️ index.tsx ➡️ App.tsx

JSX 문법

Javascript를 확장한 문법으로 UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것 권장
참고 사이트 : https://ko.legacy.reactjs.org/docs/introducing-jsx.html

특징

가상돔에서 컴포넌트 변화를 빠르게 감지하기 위해 최상위 div 한개만 지정(프래그먼트 태그<></> 가능)

return ( 
    // 최상위 부모 태그가 반드시 있어야 <></> 
    <div className="container"> 
        <h1 className='test'>Hello, 리액트!!</h1> 
        <p>반갑습니다</p> 
    </div> 
);

React “엘리먼트(element)” 자동 생성
- 다음은 JSX 문법을 사용하지 않았을 때 React 엘리먼트를 생성하는 방법이다.

function App() {
   return React.createElement("div", null, "Hello, 리액트!!")
}

자바스크립트 코드는 {}안에서 표현
- 조건문으로 분기 처리 하고 싶을 땐 삼항연산자로 표현한다.

  let name = "리액트";

  return (
    // 최상위 부모 태그가 반드시 있어야 <></>
    <div className="container">
      {/* 자바스크립트 코드는 {}안에서 표현 */}
      <h1 style={style} className='test'>Hello, {name}!!</h1>
      <p>반갑습니다</p>
      
//==========조건 분기 처리==================
<h1 style={style} className='test'>Hello, 
        {
          name === '리액트' ? (<h1>YES</h1>) : null
        }!!</h1>
      <p>반갑습니다</p>

인라인스타일링 작성법
- 다른 파일과 스타일링을 공유하고 싶지 않을 때 사용한다.
- background-color => backgroundColor
- style = {style}로 표현


  // 인라인 스타일링 : 공유하고 싶지 않을 때  
  const style = {  
  backgroundColor : 'black',  
  color : 'white',  
  fontSize : '48px',  
  fontWeight : 'bold',  
  padding : '20px'  
  }

  return (
    // 최상위 부모 태그가 반드시 있어야 <></>
    <div className="container">
      {/* 자바스크립트 코드는 {}안에서 표현 */}
      <h1 style={style} className='test'>Hello,

변수가 undefined일 때 표현법
➡️ || 사용

const port = undefined;  
return (
    {  
    port || '포트를 설정하지 않았습니다.'  
    }
)

클로징 태그 반드시 해야 한다 : <br />, <input />

주석문 작성

{/*
작성자 : kyj
작성일 : 2025.02.10.
내용 : 기능에 대한 내용
*/}

리액트를 사용할 때 JSX 문법을 자연스럽게 사용해왔지만 개념이나 특성을 이해하지 않고 적용했던 것 같다. 확실히 정리할 수 있었던 시간이었다.