React의 문법
React는 JSX(JavaScript XML) 문법을 사용하여 UI를 작성합니다. JSX는 JavaScript의 확장 문법으로, HTML과 유사한 문법을 사용하여 컴포넌트를 작성할 수 있습니다.
- 컴포넌트 생성
- 프로퍼티 전달
- 이벤트 처리
- 조건부 렌더링
- 배열 렌더링
- 스타일링
- 반복문
- 이벤트핸들링
컴포넌트 생성
React에서 컴포넌트를 생성할 때는, 함수형 컴포넌트를 작성할 수 있습니다. 이 함수는 JSX를 반환해야 하며, JSX는 괄호(())로 감싸야 합니다.
jsx
Copy code
function MyComponent() {
return <h1>Hello, World!</h1>;
}
프로퍼티 전달
React 컴포넌트에는 프로퍼티(props)를 전달할 수 있습니다. 프로퍼티는 해당 컴포넌트가 렌더링될 때 동적으로 변경될 수 있습니다.
jsx
Copy code
function MyComponent(props) {
return <h1>Hello, {props.name}!</h1>;
}
ReactDOM.render(
<MyComponent name="John" />,
document.getElementById('root')
);
이벤트 처리
React에서는 이벤트 핸들러를 등록하여 클릭과 같은 사용자 동작에 대한 이벤트를 처리할 수 있습니다.
jsx
Copy code
function MyComponent(props) {
function handleClick() {
alert('Hello, ' + props.name + '!');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}
조건부 렌더링
React에서는 조건부 렌더링을 할 수 있습니다. 이를 통해 상태에 따라 다른 UI를 렌더링할 수 있습니다.
jsx
Copy code
function MyComponent(props) {
if (props.isLoggedIn) {
return <h1>Welcome back, {props.username}!</h1>;
} else {
return <h1>Please log in.</h1>;
}
}
React에서는 if-else문이 아닌, 삼항 연산자나 && 연산자를 이용하여 조건부 렌더링을 할 수 있습니다.
jsx
Copy code
function Greeting(props) {
return (
<div>
{props.isLoggedIn ? (
<h1>Welcome back!</h1>
) : (
<h1>Please log in.</h1>
)}
</div>
);
}
function Button(props) {
return (
<button onClick={props.onClick}>
{props.isDisabled ? 'Disabled' : 'Click me'}
</button>
);
}
위의 예시에서 Greeting 컴포넌트는 isLoggedIn prop이 참이면 Welcome back!을, 거짓이면Please log in.을 출력합니다. Button 컴포넌트는 isDisabled prop이 참이면 Disabled를, 거짓이면Click me를 출력합니다.
배열 렌더링
React에서는 배열을 렌더링할 수 있습니다. 이를 통해 반복적인 UI를 렌더링할 수 있습니다.
jsx
Copy code
function MyComponent(props) {
const items = props.items.map(item => <li key={item.id}>{item.text}</li>);
return (
<div>
<h1>My Items</h1>
<ul>
{items}
</ul>
</div>
);
}
스타일링
React에서는 인라인 스타일링이나 CSS 클래스를 사용하여 스타일을 적용할 수 있습니다.
jsx
Copy code
function MyComponent() {
const style = { color: 'red', fontWeight: 'bold' };
return <h1 style={style}>Hello, World!</h1>;
}
function AnotherComponent() {
return <button className="btn-primary">Click me</button>;
}
반복문
React에서는 map() 메소드를 이용하여 배열 요소를 반복적으로 렌더링할 수 있습니다.
jsx
Copy code
function List(props) {
const items = props.items;
return (
<ul>
{items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
위의 예시에서 List 컴포넌트는 items prop으로 배열을 받아와 map() 메소드를 이용하여 배열 요소를 순회하며 li 엘리먼트를 출력합니다. key 속성은 각 요소를 구별하기 위한 고유한 값을 제공합니다.
이벤트 핸들링
React에서는 onClick, onSubmit 등 다양한 이벤트를 다룰 수 있습니다.
jsx
Copy code
function Button(props) {
function handleClick() {
console.log('Button clicked');
}
return <button onClick={handleClick}>{props.text}</button>;
}
function Form(props) {
function handleSubmit(event) {
event.preventDefault();
console.log('Form submitted');
}
return (
<form onSubmit={handleSubmit}>
<input type="text" name="name" />
<button type="submit">{props.submitText}</button>
</form>
);
}
위의 예시에서 Button 컴포넌트는 클릭 이벤트를 처리하기 위해 handleClick() 함수를 이용합니다. Form 컴포넌트는 폼 제출 이벤트를 처리하기 위해 handleSubmit() 함수를 이용하며, event.preventDefault()를 호출하여 폼의 기본 동작을 막습니다.