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