[React]#2-1 Inflearn: 만들면서 배우는 리액트: 기초/Component/함수/인자가 있는 함수

목차

1. Ant Design
2. Component 만들기
3. log 찍기
4. 인자가 있는 함수 만들기
5. Component: 기본 함수, 화살표 함수
6. 함수에 인자를 넣어주는 2가지 방법
   1. 태그 닫기 전에 넣기
   2. 태그 닫고 넣기
7. return 생략한 함수
8. props 사용 안 하고 인자 바로 받기

 

---

1. Ant Design

리액트 개발 == 컴포넌트 개발

컴포넌트는 리액트에서 함수를 사용해서 만듦.

 

ui 라이브러리 Ant Design 에서 다양한 컴포넌트를 확인할 수 있음

Ant Design - The world's second most popular React UI framework

---

2. Component 만들기

- 여기저기서 사용 가능한 UI코드 조각(재사용이 쉽다.)

- 대문자로 시작

 

기존에 catItem 변수를 사용해서

const catItem = (
      <li>
        <img src="https://cataas.com/cat/HSENVDU4ZMqy7KQ0/says/react" />
      </li>
    );

아래와 같이 활용했었는데, 이를 컴포넌트를 활용해서 해보자.

const favorites = (
  <ul class="favorites">
    {catItem}
    {catItem}
    {catItem}
  </ul>
);

 

CatItem 함수를 만들고

function CatItem() {
      return (
        <li>
          <img src="https://cataas.com/cat/HSENVDU4ZMqy7KQ0/says/react" />
        </li>
      )
    }

 

html 코드처럼 꺽쇠를 사용해서 활용!

const favorites = (
      <ul class="favorites">
        <CatItem />
        <CatItem />
      </ul>
    );

---

3. log 찍기

consol.log("로그 찍기")

개발의 기본,, 로그 찍으며 개발 상황 파악하기

 

기본 로그찍기가 이런 거 같은데, 이미 충분히 간단하네....

안드에서는 이렇게 하나의 인자로 로그 찍으려면 Timber 라이브러리 사용했는데 ㅎㅎㅋㅋ

---

4. 인자가 있는 함수 만들기

props로 인자를 받아올 수 있는데, 이 인자는 오브젝트 형식으로 받아진다.

function CatItem(props) {
      return (
        <li>
          <img src={props.img} />
        </li>
      );
    }

요런 함수가 있다면

const favorites = (
      <ul class="favorites">
        <CatItem img="https://cataas.com/cat/BxqL2EjFmtxDkAm2/says/inflearn" />
        <CatItem img="https://cataas.com/cat/18MD6byVC1yKGpXp/says/JavaScript" />
      </ul>
    );

 

인자를 이렇게 넘겨주면 된다.

완전 html 코드와 비슷,,,

---

5. Component: 기본 함수, 화살표 함수

 

1. 기본함수: function A() {};

2. 화살표 함수: const B = () => {};

2-1. 리턴을 바로 하지 않는 화살표 함수:

const B = () => { ~ return (); }

// 1, 기본 함수
function Favorites() {
      return (
        <ul class="favorites">
          <CatItem img="https://cataas.com/cat/BxqL2EjFmtxDkAm2/says/inflearn" />
          <CatItem img="https://cataas.com/cat/18MD6byVC1yKGpXp/says/JavaScript" />
        </ul>
      );
    }

// 2, 화살표 함수
const MainCard = () => {
  return (
     <div class="main-card">
       <img
         src="https://cataas.com/cat/HSENVDU4ZMqy7KQ0/says/react"
         alt="고양이"
         width="400"
       />
       <button>🤍</button>
     </div>
   );
 }

두 방식 중 암거나 사용해서 

const 여기다가그려 = document.querySelector("#app");

    const app = (
      <div>
        {h1}
        {form}
        <MainCard />
        <Favorites />
      </div>
    );

    ReactDOM.render(app, 여기다가그려);

html 태그처럼 사용해서 넣어주기~

---

6. 함수에 인자를 넣어주는 2가지 방법

 

6-1. 태그 닫기 전에 넣기

<CatItem img="https://cataas.com/cat/BxqL2EjFmtxDkAm2/says/inflearn" />

 

props는 아래와 같이 오브젝트 형식으로 받아지기 때문에

{img:'https://cataas.com/cat/BxqL2EjFmtxDkAm2/says/inflearn'}

 

<img src={props.img} />

 

이렇게 props.img로 img를 사용해야 한다.

 

6-2. 태그 닫고 넣기

 <Title>1번째 고양이 가라사대</Title>

요렇게 쓰면 오브젝트의 Children으로 받아지기 때문에

{children: "1번째 고양이 가라사대"}

 const Title = (props) => {
      return <h1>{props.children}</h1>;
    };

함수도 요로코롬 props의 children을 사용해야 한다.

---

7. return 생략한 함수

바로 리턴하려면 리턴 생략하고 요렇게 해도 됨 ㅎㅎ 깔끔

const Title = (props) => (
      <h1>{props.children}</h1>
    );

---

8. props 사용 안 하고 인자 바로 받기

props 없이 인자를 바로 받으려면 아래와 같은 함수를

function CatItem(props) {
      return (
        <li>
          <img src={props.img} />
        </li>
      );
    };

아래처럼 중괄호를 추가해준다.

그러면 오브젝트를 바로 받는 거라 바로 인자를 사용할 수 있음!

function CatItem({ img }) {
      return (
        <li>
          <img src={img} />
        </li>
      );
    };