최근에 코테를 봤는데 완전히 망해버려서 React 문법부터 다시 정리하는 시간을 가져볼까한다.
참고 사이트 : https://react.dev/
Quick Start
- How to create and nest components 구성 요소를 만들고 중첩하는 방법
- How to add markup and styles 마크업과 스타일을 추가하는 방법
- How to display data 데이터 표시 방법
- How to render conditions and lists 조건 및 목록을 렌더링하는 방법
- How to respond to events and update the screen 이벤트 대응 및 화면 업데이트 방법
- How to share data between components 구성 요소 간에 데이터를 공유하는 방법
1. 컴포넌트 생성 및 중첩
React의 컴포넌트는 마크업을 반환하는 JavaScript 함수이다.
- 컴포넌트 생성
function MyButton() { return ( <button>I'm a button</button> ); }선언했으므로 MyButton을 다른 컴포넌트에 중첩할 수 있다.
- 컴포넌트 중첩
export default function MyApp() { return ( <div> <h1>Welcome to my app</h1> <MyButton /> </div> ); }유의할 점은 컴포넌트 이름이 항상 대문자로 시작한다는 점이다.
반대로 HTML 태그는 소문자여야 한다.
키워드 export default는 파일의 주요 구성 요소를 지정한다.
2. JSX로 마크업 작성하기
선택 사항이지만 대부분의 React 프로젝트는 편의상 JSX를 사용한다.
한 컴포넌트는 여러 JSX 태그를 반환 할 수 없기에 공유부모로 감싸야한다.
function AboutPage() {
return (
<>
<h1>About</h1>
<p>Hello there.<br />How do you do?</p>
</>
);
}
- 스타일 추가
- React에서 className은 HTML class 속성과 동일하다.
- CSS를 추가하는 방법을 규정하지 않는다.
나는 보통 module.css 파일을 만들어 import하는 방식을 선택하거나
emotion을 애용한다.npm i @emotion/reactemotion은 styled-components와 유사한데 이에 대한 자세한 설명은 다음에 하겠다.
3. 데이터 표시
중괄호를 사용하면 코드에서 일부 변수를 포함하고 사용자에게 표시할 수 있다.
return (
<h1>
{user.name}
</h1>
);좀 더 복잡한 객체도 가능하다.
const user = {
name: 'Hedy Lamarr',
imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
imageSize: 90,
};
>
export default function Profile() {
return (
<>
<h1>{user.name}</h1>
<img
className="avatar"
src={user.imageUrl}
alt={'Photo of ' + user.name}
style={{
width: user.imageSize,
height: user.imageSize
}}
/>
</>
);
}style을 JSX에서 사용할 경우 style={{}} 이렇게 괄호를 2개 넣어주어야 한다.
4. 조건부 렌더링
React에는 조건을 작성하기 위한 특별한 구문이 없다. 대신 일반 JavaScript 코드를 작성할 때 사용하는 것과 동일한 기술을 사용한다.
삼항 연산자? 혹은 else&&를 사용하면 JSX 내에서도 작동한다.
// 삼항연산자
<div>
{isLoggedIn ? (
<AdminPanel />
) : (
<LoginForm />
)}
</div>
//else (앞에것이 true이면 &&뒤에 엘리먼트를 반환한다.)
<div>
{isLoggedIn && <AdminPanel />}
</div>배열을 이용해 컴포넌트 목록을 렌더링 한다면 다음과 같이 map을 사용할 수 있다.
const products = [
{ title: 'Cabbage', isFruit: false, id: 1 },
{ title: 'Garlic', isFruit: false, id: 2 },
{ title: 'Apple', isFruit: true, id: 3 },
];
export default function ShoppingList() {
const listItems = products.map(product =>
<li
key={product.id}
style={{
color: product.isFruit ? 'magenta' : 'darkgreen'
}}
>
{product.title}
</li>
);
return (
<ul>{listItems}</ul>
);
}key는 필수로 들어가야하며, 보통은 고유한 값인 ID나 INDEX를 이용해 식별할 수 있도록 한다.
5. 이벤트 대응 및 화면 업데이트
- 이벤트에 응답
컴포넌트 내에서 이벤트 핸들러 함수를 선언하여 이벤트에 응답할 수 있다.function MyButton() { function handleClick() { alert('You clicked me!'); } return ( <button onClick={handleClick}> Click me </button> ); }이벤트 핸드러 함수에 괄호를 넣어서 호출하면 안되고 전달만 해야한다.
- 화면 업데이트
상태변수(useState)를 사용하면 컴포넌트가 일부 정보를 기억하고 표시할 수 있다.
우선 React에서 useState를 가져온다.import { useState } from 'react';그리고 컴포넌트 내에서 상태변수를 선언할 수 있다.
function MyButton() { const [count, setCount] = useState(0); // ...괄호 안에 첫 번째 값은 현재 상태이고, 두 번째는 이를 업데이트 할 수 있는 기능이다.
그리고 useState() 괄호 안에는 초기값을 넣어준다.function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <button onClick={handleClick}> Clicked {count} times </button> ); }클릭 시 리렌더링 되면서 count 상태를 기억하고 +1 된 값을 보여준다.
- 후크사용
use로 시작하는 함수를 Hooks라고 한다. React에서 제공하는 내장 Hook이다.
기존 Hook을 결합하여 커스텀 Hook을 만들수도 있다.
컴포넌트나 다른 Hook의 맨 위에서만 Hooks를 호출할 수 있다.
6. 구성 요소 간에 데이터 공유(props)
나는 이걸 state끌어올리기 라고 배웠는데 상위 컴포넌트에 useState를 만들고 이걸 props로 하위 컴포넌트에 전달해주면 하위 컴포넌트에서 state 변경 시 상위 컴포넌트에 state값이 변경되고, 이는 연결된 다른 하위 컴포넌트에게도 적용된다.
import { useState } from 'react';
export default function MyApp() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div>
<h1>Counters that update together</h1>
<MyButton count={count} onClick={handleClick} />
<MyButton count={count} onClick={handleClick} />
</div>
);
}
function MyButton({ count, onClick }) {
return (
<button onClick={onClick}>
Clicked {count} times
</button>
);
}
기본기 끝!
다음은 틱택토 튜토리얼이라고 하네.
이게 그 유명한 틱택토...!
