최근에 코테를 봤는데 완전히 망해버려서 React 문법부터 다시 정리하는 시간을 가져볼까한다.
참고 사이트 : https://react.dev/
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는 파일의 주요 구성 요소를 지정한다.
선택 사항이지만 대부분의 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/react
emotion은 styled-components와 유사한데 이에 대한 자세한 설명은 다음에 하겠다.
중괄호를 사용하면 코드에서 일부 변수를 포함하고 사용자에게 표시할 수 있다.
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개 넣어주어야 한다.
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를 이용해 식별할 수 있도록 한다.
- 이벤트에 응답
컴포넌트 내에서 이벤트 핸들러 함수를 선언하여 이벤트에 응답할 수 있다.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를 호출할 수 있다.
나는 이걸 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>
);
}
기본기 끝!
다음은 틱택토 튜토리얼이라고 하네.
이게 그 유명한 틱택토...!