2024년 10월 30일

✏️ 리액트란 무엇인가

• React.js는 자바스크립트 라이브러리의 하나임

  • 사용자 인터페이스를 만들기 위해 페이스북(조던 워크)에서 개발
  • 싱글 페이지 어플리케이션(SPA) 및 모바일 어플리케이션 개발 가능
  • 2011년 페이스북의 뉴스 피드에 처음 적용, 2012년 인스타그램닷컴에 적용
  • 2013년 발표. 오픈소스화 됨.

• 리액트의 동작 원리

  • 초기 랜더링
  • 가상 DOM 변경
  • 재조정
  • 실제 DOM 업데이트
  • 변경된 부분만 업데이트됨

✏️ 프로젝트 생성

• npx create-react-app todolist —template typescript
• cd todolist
• npm start

✏️ jsx 문법

• 자바스크립트의 확장 문법

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

// 기존의 자바스크립트 문법
/*
function App() {
	return Recate.createElement("div", null, "Hello, 리액트!!", 
	React.createElement("p", null, "반갑습니다."));
}
*/

// 리액트 JSX 문법
// 1. 반드시 최상위 부모 태그가 있어야함 -> <div></div> or <></> 사용
// -> 가상 돔을 사용하기 때문에 컴포넌트로 만들어줌

// 2. 클래스는 className을 사용

// 3. 자바스크립트 코드 사용 가능 -> {} 안에서 사용 가능
// {} 안에서 조건문 사용 가능 -> if문 말고 삼항 연산자 사용해야 함

// 4. 인라인 스타일 적용 -> 컴포넌트 안에서 스타일을 지정해 그 내부에서 사용할 수 있게 함
// (인라인 스타일 : 카멜 표기법 사용)) -> 해당 컴포넌트 안에서만 사용하고 싶을 때
// 일반 css는 모든 컴포넌트들이 공유

// 5. 태그는 닫는 태그 꼭 써야함 -> <></> or <br />

// 6. 주석 작성 (메모 or 임시로 코드의 실행 중지시키고 싶을때)
  /* 
  작성자 : 000, 
  작성일 : 2030.06.06,
  내용 : 기능에 대한 내용
  */

function App() {
	let name = '리액트';
	const style = {
		backgroundColor : 'black',
		color : 'white',
		fontSize : '48px',
		fontWeight : 'bold',
		padding : '20px'
	}
  return (
    <div style = {style}>
      <h1 style = {style}>Hello, {
          name === '리액트' ? (<h1>YES</h1>) : null
        }</h1>
      <p>반갑습니다.</p>
      {/* 주석문 */}
    </div>
  );


	// 어떤 함수에서 정상적으로 리턴했다면 특정 값을 반환하지만
	// 잘못 리턴하면 undefined를 반환 -> 잘못된 결과값
	// 따라서, undefiend를 반환할 수 있는 예외 처리를 해주면
	/*
	const port = undefined;
	return(
		<div>
			{
				port || '포트를 설정하지 않았습니다. or 디폴트값(3000)'
			}
		</div>
	);
	*/
}

export default App;

🍎🍏 오늘의 느낀점 : 오랜만에 React 복습!