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>© 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
