[React – 기초강좌] HTML, CSS, Javascript(Typescript) 다지기

React는 웹 애플리케이션 UI를 구축하는 강력한 라이브러리이지만, 효율적으로 사용하기 위해선 HTML, CSS, 그리고 JavaScript의 기초 지식이 필수적이며, 더 나아가 Typescript를 사용할 경우 Typescript도 알아야합니다. 이 포스팅에서는 React를 배우기 전 반드시 숙지해야 할 HTML, CSS, JavaScript, Typescript 개념을 정리해드립니다.

HTML (웹 페이지의 기본 구조)

HTML은 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어입니다. JSX(JavaScript XML)를 사용해 React에서는 HTML과 비슷한 방식으로 UI를 구성합니다.

주요 HTML 태그와 역할

<div> – 구역을 나누는 컨테이너

• 역할: 웹 페이지의 특정 부분을 묶어주는 블록 요소로, 레이아웃을 구성하는 데 사용됩니다.
• 사용 예: 섹션을 나눌 때 가장 많이 사용하는 태그

<div class="container">
  <h1>My Website</h1>
  <p>Welcome to my homepage!</p>
</div>

<section> – 문서의 논리적 구분

• 역할: 콘텐츠의 논리적 그룹을 구분하며, 페이지의 주요 섹션을 정의합니다.

<section>
  <h2>About Us</h2>
  <p>We are a tech company specializing in AI.</p>
</section>

<article> – 독립적인 콘텐츠 단위

• 역할: 블로그 글, 뉴스 기사 등 독립적으로 사용할 수 있는 콘텐츠를 감싸는 요소입니다.

<article>
  <h3>Latest News</h3>
  <p>React 18 is now available!</p>
</article>

<header> / <footer> – 상단과 하단 구조

• <header>: 제목, 로고, 내비게이션 등을 포함하는 웹 페이지의 상단 영역
• <footer>: 저작권 정보, 연락처 등을 포함하는 페이지의 하단 영역

<header>
  <h1>Company Logo</h1>
  <nav>...</nav>
</header>
<footer>
  <p>&copy; 2024 My Website</p>
</footer>

<input> / <button> / <form> – 사용자 입력을 위한 태그

• <input>: 사용자로부터 데이터를 입력받는 요소
• <button>: 클릭 이벤트를 발생시키는 버튼
• <form>: 사용자 입력을 서버로 제출하는 폼 요소

<input type="text" placeholder="Enter your name" />
<button>Click Me</button>
<form action="/submit" method="POST">
  <input type="text" name="username" />
  <button type="submit">Submit</button>
</form>

CSS (디자인과 레이아웃 관리)

CSS는 HTML 요소들의 스타일과 레이아웃을 정의합니다. React에서는 CSS 모듈이나 CSS-in-JS를 통해 컴포넌트별로 스타일을 지정할 수 있습니다.

2.1 핵심 CSS 개념

CSS 선택자(Selectors)

• 특정 요소에 스타일을 적용하는 규칙
  • ID를 이용한 선택자: #(ID)
  • Class를 이용한 선택자: .(Class)
  • Element를 이용한 선택자: (Element)

#header { background-color: blue; } /* ID 선택자 */
.btn { padding: 10px; } /* 클래스 선택자 */
p { color: gray; } /* 요소 선택자 */

박스 모델(Box Model)

• 요소의 content, padding, border, margin으로 구성된 레이아웃 구조

div {
  margin: 10px;
  padding: 20px;
  border: 2px solid black;
}

Flexbox와 Grid 레이아웃

• Flexbox: 요소를 행(row) 또는 열(column)로 정렬하는 방식

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

• Grid: 복잡한 2차원 레이아웃을 구성할 때 유용

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

3. JavaScript (기능과 동작 구현)

JavaScript는 웹 페이지에 동적 기능을 추가합니다. React는 JavaScript를 기반으로 상태 관리와 이벤트 처리를 수행합니다.

3.1 주요 JavaScript 문법

변수 선언 (var, let, const)

• let과 const를 주로 사용합니다.

let count = 0;
const PI = 3.14;

함수 선언과 화살표 함수(Arrow Functions)

• React에서는 화살표 함수를 자주 사용합니다.

const add = (a, b) => a + b;

비구조화 할당(Destructuring)

• 객체나 배열의 값을 쉽게 추출할 수 있습니다.

const { name, age } = person;

비동기 처리 (Promise, async/await)

• React의 API 호출 시 사용됩니다.

const fetchData = async () => {
  const response = await fetch('/api/data');
  const data = await response.json();
};

TypeScript (정적 타입과 안전성 강화)

TypeScript는 JavaScript에 정적 타입 시스템을 추가하여 대규모 애플리케이션 개발에 적합합니다.

4.1 기본 타입과 인터페이스 정의

• 기본 타입: string, number, boolean 등

let age: number = 25;
let isActive: boolean = true;

• 인터페이스와 타입 선언

interface User {
  name: string;
  age: number;
}

const user: User = { name: 'John', age: 30 };

4.2 React에서의 TypeScript 사용

컴포넌트에 Props 타입 지정

interface Props {
  title: string;
  count: number;
}

const MyComponent: React.FC<Props> = ({ title, count }) => (
  <h1>{title}: {count}</h1>
);

useState와 useEffect의 타입 지정

const [count, setCount] = useState<number>(0);

useEffect(() => {
  console.log(count);
}, [count]);

참고 링크

• devitworld github repository
  • https://github.com/jh4843/devitworld-react-basic