React

1강 — 컴포넌트와 JSX

2024 DTC

슬라이드 보는 법

→ / Space	다음으로
←	이전으로
↓ / ↑	같은 주제 안에서 단계 이동
O	전체 슬라이드 한눈에 보기
F	전체화면

아래쪽 화살표가 보이면 그 주제는 단계별로 이어집니다

오늘 끝나면 할 수 있는 것

React 프로젝트를 만들고 띄운다
JSX로 화면을 쓴다
화면을 컴포넌트로 쪼갠다
props로 값을 내려보낸다
목록과 조건을 화면에 그린다

React란?

React란? 지난 시간

            
              const title = document.querySelector("#title");
              title.textContent = "새 제목";

              const list = document.querySelector("#list");
              list.innerHTML = "<li>새 항목</li>";

바꿀 곳이 늘어날수록

이 코드도 같이 늘어난다

React란? 핵심

직접 조작

어디를 어떻게 바꿀지 지시

명령형

React

데이터가 이러면 화면은 이렇다

선언형

React란?

화면을 컴포넌트라는
조각으로 나눠서 조립한다

React란? 컴포넌트

<App> ├─ <Header> ├─ <TodoList> │ ├─ <TodoItem> 우유 사기 │ ├─ <TodoItem> 과제 하기 │ └─ <TodoItem> 운동 가기 └─ <Footer>

같은 모양이 반복되면 조각 하나로 만들어 재사용한다

오늘 배울 것

1. 프로젝트 만들기
2. JSX
3. 컴포넌트
4. props
5. 리스트 렌더링
6. 조건부 렌더링

1. 프로젝트 만들기

React 앱을 띄우려면

1. 프로젝트 만들기

            
              npm create vite@latest my-app
              cd my-app
              npm install
              npm run dev

Local: http://localhost:5173/

1. 프로젝트 만들기 구조

my-app/ ├─ index.html 진짜 HTML은 이거 하나 ├─ package.json └─ src/ ├─ main.jsx 시작점 ├─ App.jsx 화면 └─ index.css

1. 프로젝트 만들기 index.html

          index.html
          
            <div id="root"></div>
            <script type="module" src="/src/main.jsx"></script>

1. 프로젝트 만들기 main.jsx

          src/main.jsx
          
            import { createRoot } from 'react-dom/client'
            import App from './App.jsx'

            createRoot(document.getElementById('root'))
              .render(<App />)

1. 프로젝트 만들기 App.jsx

            src/App.jsx
            
              function App() {
                return <h1>안녕하세요</h1>;
              }

              export default App;

안녕하세요

1. 정리

npm create vite@latest 로 만든다
HTML 파일은 하나, 나머지는 React가 그린다
src/App.jsx 를 고치면 화면이 바뀐다

2. JSX

JavaScript 안에 화면을 쓰려면

2. JSX

            
              function App() {
                return <h1>안녕하세요</h1>;
              }

안녕하세요

2. JSX 중괄호

            
              const name = "홍길동";

              function App() {
                return <h1>{name}님 안녕하세요</h1>;
              }

홍길동님 안녕하세요

2. JSX 중괄호

            
              <p>{1 + 2}</p>
              <p>{name.toUpperCase()}</p>
              <p>{user.age >= 20 ? "성인" : "미성년"}</p>

{1 + 2}3

toUpperCase()대문자

삼항 연산자"성인"

2. JSX 주의

HTML과 다른 점 네 가지

2. JSX 1. className

            
              // HTML
              <div class="box"></div>

              // JSX
              <div className="box"></div>

class 는 JS 예약어라

className 을 쓴다

2. JSX 2. 부모 하나

            
              // 안 됨 — 최상위가 둘
              return (
                <h1>제목</h1>
                <p>내용</p>
              );

JSX expressions must have

one parent element

최상위 태그가 둘이면 어떻게 될까요?

2. JSX 2. Fragment

            
              return (
                <>
                  <h1>제목</h1>
                  <p>내용</p>
                </>
              );

제목

내용

2. JSX 3. self-closing

            
              // HTML
              <img src="a.png">
              <br>

              // JSX
              <img src="a.png" />
              <br />

빈 태그도 반드시 닫는다

2. JSX 4. style은 객체

            
              <p style={{ color: "tomato", fontSize: 20 }}>
                안녕
              </p>

안녕

2. 정리

class	className 으로
최상위	하나만. 여럿이면 <>...</>
빈 태그	<img /> 처럼 닫는다
style	객체로. font-size → fontSize
{ }	JS 식을 끼워 넣는다

3. 컴포넌트

화면 조각을 만들어 재사용하려면

3. 컴포넌트

            
              function Hello() {
                return <h1>안녕하세요</h1>;
              }

              function App() {
                return <Hello />;
              }

안녕하세요

3. 컴포넌트 재사용

            
              function App() {
                return (
                  <>
                    <Hello />
                    <Hello />
                    <Hello />
                  </>
                );
              }

안녕하세요

3. 컴포넌트 대문자

            
              function hello() {   // 소문자
                return <h1>안녕</h1>;
              }

              <hello />

화면에 아무것도 안 나온다

소문자는 HTML 태그로 취급된다

여기서 이름을 소문자로 쓰면?

3. 컴포넌트 파일 나누기

            src/Hello.jsx
            
              function Hello() {
                return <h1>안녕하세요</h1>;
              }

              export default Hello;

            src/App.jsx
            
              import Hello from './Hello.jsx';

안녕하세요

3. 정리

JSX를 return 하는 함수가 컴포넌트
이름은 반드시 대문자로 시작
<이름 /> 로 쓴다
파일 하나에 컴포넌트 하나

4. props

컴포넌트에 값을 내려보내려면

4. props

컴포넌트가 함수라면
인자도 받을 수 있어야 한다

4. props

            
              function Hello(props) {
                return <h1>{props.name}님 안녕</h1>;
              }

              <Hello name="홍길동" />
              <Hello name="윤경" />

홍길동님 안녕

윤경님 안녕

4. props 구조 분해

            
              function Hello({ name, age }) {
                return <h1>{name} ({age}세)</h1>;
              }

              <Hello name="홍길동" age={20} />

홍길동 (20세)

4. props children

            
              function Card({ children }) {
                return <div className="card">{children}</div>;
              }

              <Card>
                <p>안쪽 내용</p>
              </Card>

안쪽 내용

4. props 읽기 전용

            
              function Hello({ name }) {
                name = "다른 이름";   // 하면 안 된다
                return <h1>{name}</h1>;
              }

props는 읽기 전용이다

바꾸려면 2강의 state

4. 정리

속성처럼 넘기면 인자로 들어온다
{ name, age } 로 구조 분해
태그 사이 내용은 children
props는 읽기 전용

5. 리스트 렌더링

배열을 화면에 그리려면

5. 리스트 렌더링

            
              const fruits = ["사과", "바나나", "포도"];

              // 이걸 <li> 세 개로 만들려면?

사과
바나나
포도

5. 리스트 렌더링 map

            
              <ul>
                {fruits.map((f) => (
                  <li>{f}</li>
                ))}
              </ul>

사과
바나나
포도

5. 리스트 렌더링 key

            
              <ul>
                {fruits.map((f) => (
                  <li>{f}</li>
                ))}
              </ul>

Warning: Each child in a list

should have a unique "key" prop

이대로 실행하면 콘솔에 뭐가 뜰까요?

5. 리스트 렌더링 key

            
              <ul>
                {fruits.map((f) => (
                  <li key={f}>{f}</li>
                ))}
              </ul>

사과
바나나
포도

5. 리스트 렌더링 key

            
              const todos = [
                { id: 1, text: "우유 사기" },
                { id: 2, text: "과제 하기" },
              ];

              todos.map((t) => <li key={t.id}>{t.text}</li>)

우유 사기
과제 하기

5. 정리

배열.map() 으로 JSX 배열을 만든다
각 항목에 key 를 준다
key는 데이터의 id. 인덱스는 피한다

6. 조건부 렌더링

상황에 따라 다르게 그리려면

6. 조건부 렌더링 if

            
              function Greeting({ isLogin }) {
                if (isLogin) {
                  return <h1>환영합니다</h1>;
                }
                return <h1>로그인 해주세요</h1>;
              }

환영합니다

6. 조건부 렌더링 삼항

            
              <h1>
                {isLogin ? "환영합니다" : "로그인 해주세요"}
              </h1>

환영합니다

6. 조건부 렌더링 &&

            
              {hasNew && <p>새 알림이 있습니다</p>}

새 알림이 있습니다

6. 조건부 렌더링 함정

            
              {count && <p>{count}개</p>}

count가 0이면

화면에 0 이 그대로 찍힌다

여기서 count가 0이면 화면에 뭐가 보일까요?

6. 정리

컴포넌트 전체가 갈리면 if
일부만 갈리면 조건 ? A : B
있을 때만 보이면 조건 && JSX
숫자 조건은 count > 0 && 로

정리

오늘 배운 것

한눈에

JSX	JS 안에 쓰는 HTML. className, 부모 하나, { }
컴포넌트	JSX를 return 하는 함수. 대문자로 시작
props	부모가 내려주는 값. 읽기 전용
children	태그 사이의 내용
map + key	배열을 화면에 나열
? : 와 &&	조건에 따라 그리기

실습

직접 만들어봅시다

실습 과제

프로필 카드 컴포넌트 — 이름, 소개를 props로
배열을 받아 카드 여러 개를 map 으로 그리기
소개가 없으면 “소개 없음” 을 대신 보여주기

HTML 강의에서 만든 프로필 카드를 React로 옮겨봅니다

더 볼 것

React 공식 문서 (한국어)
UI 표현하기 — 오늘 내용

끝

2강에서는 화면을 움직입니다