React 학습하기 - 빠르게 시작하기

https://ko.react.dev/learn 를 보고 정리한 블로그입니다!

1. 컴포넌트 생성 및 중첩하기

• React 앱은 컴포넌트 단위로 구성된다.
• React 컴포넌트는 마크업을 반환하는 자바스크립트 함수이다.
• 함수 하나를 만들고 return 안에 JSX만 쓰면 바로 컴포넌트!
• 그리고 컴포넌트 안에 컴포넌트를 넣으면 중첩도 가능하다.

function MyButton() {   return (     <button>I'm a button</button>   ); }   export default function MyApp() {   return (     <div>       <h1>Welcome to my app</h1>       <MyButton />     </div>   ); }

• <MyButton /> 처럼 React 컴포넌트 이름은 항상 대문자로, HTML 태그는 소문자로 시작해야한다.

+ JSX란 JavaScript 코드 안에서 HTML처럼 생긴 문법을 쓸 수 있게 해주는 확장 문법이다.

const element = <h1>Hello, world!</h1>; // XXX JavaScript 문법 아님, 그러나 React에서는 사용 가능

• 그러나 React는 위의 코드가 동작이 가능하다.
• JSX는 실제로 브라우저가 이해하는 HTML이 아니고 JavaScript로 변환돼서 실행된다.

const element = React.createElement('h1', null, 'Hello, world!'); // 결국 이렇게 바뀜

2. JSX로 마크업 작성하기

• 컴포넌트는 여러개의 JSX 태그를 반환할 수 없기 때문에 <div>..</div> 또는 빈 <>..</> 래퍼와 같이 공유되는 부모로 감싸야한다.

return (   <h1>About</h1>   <p>Hello</p> ); // ❌ 두 개 이상의 형제 요소가 있음   return (   <div>     <h1>About</h1>     <p>Hello</p>   </div> ); // ✅ 이렇게 하면 됨

• 근데 단순히 묶기만 하고 불필요한 <div>를 만들고 싶지 않을 때는?
• Fragment 라는 것을 사용하면 된다.

return (   <>     <h1>About</h1>     <p>Hello</p>   </> );   import React from 'react'; return (   <React.Fragment>     <h1>About</h1>     <p>Hello</p>   </React.Fragment> ); // 이건 긴 버전인데, 근데 이게 길어서 <> ... </> 이렇게 축약해서 자주 쓴다고 함

3. 스타일 추가하기

• React에서는 className으로 css 클래스를 지정한다.

<img className="avatar" /> ... .avatar {   border-radius: 50%; }   return <h1 style={{ color: 'blue' }}>Hello</h1>; //인라인 스타일

4. 데이터 표시하기

• props를 통해 데이터 전달 가능
• 문자열, 숫자, 배열, 객체 전부 JSX에 표시 가능

function Welcome({ name }) {   return <h2>Hi, {name}</h2>; } <Welcome name="Jaeun" />

5. 조건부 렌더링

• if, &&, ? : 삼항 연산자 등 JavaScript 문법 그대로 사용

<div>   {isLoggedIn ? (     <AdminPanel />   ) : (     <LoginForm />   )} </div>   <div>   {isLoggedIn && <AdminPanel />} </div> //else 분기가 필요하지 않으면 더 짧은 && 연산자를 사용할 수도 있음

6. 리스트 렌더링하기

• 배열을 .map()으로 JSX 변환
• key는 꼭 필요 (중복 안되는 값으로)

const items = ['a', 'b', 'c']; {items.map((item, i) => <li key={i}>{item}</li>)}

7. 이벤트에 응답하기

• 컴포넌트 내부에 onClick, onChange 등 이벤트 핸들러 함수를 선언해 이벤트에 응답할 수 있다.
• onClick={handleClick()} 가 아닌 onClick={handleClick}를 사용!
  • 함수를 호출하지않고 전달만 하면, React가 버튼을 클릭할 때 이벤트 핸들러를 호출한다.

function MyButton() {   function handleClick() {     alert('You clicked me!');   }     return (     <button onClick={handleClick}>       Click me     </button>   ); }

8. 화면 업데이트하기

• useState 훅으로 상태를 만들고, 변경하면 자동으로 렌더링이 된다.
• React는 상태가 바뀌면 자동으로 다시 렌더링된다

const [count, setCount] = useState(0); <button onClick={() => setCount(count + 1)}>+1</button>

9. Hook 사용하기

• useState, useEffect, useRef, useMemo 등 use로 시작하는 함수를 Hook이라고 한다.

10. 컴포넌트 간에 데이터 공유하기

• 컴포넌트 간에 state를 공유하게한다.
• 상위 -> 하위로는 props

export default function MyApp() {   const [count, setCount] = useState(0);     function handleClick() {     setCount(count + 1);   }     return (     <div>       <h1>Counters that update separately</h1>       <MyButton count={count} onClick={handleClick} />       <MyButton count={count} onClick={handleClick} />     </div>   ); }     function MyButton({ count, onClick }) {   return (     <button onClick={onClick}>       Clicked {count} times     </button>   ); }