만들면서 배우는 react : 기초 - 2

요즘 건강관리의 필요성을 느껴서 운동을 시작했는데,
적응중이라서 그런건지… 아니면 내 체력이 거지라서 그런건지…
너무너무 피곤하다 ㅠ_ㅜ
원래 처음은 항상 괴롭나보다.

---

li 태그를 여러개 사용하고 싶다면 어떻게 하는 것이 좋을까???

const favorites = (
  <ul class="favorites">
    <li>
      <img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" alt="고양이" />
    </li>
    <li>
      <img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" alt="고양이" />
    </li>
    <li>
      <img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" alt="고양이" />
    </li>
  </ul>
);

const here = document.querySelector('#app');

ReactDOM.render(favorites, here);

이렇게 하면 총 세개의 li태그가 나타나게 된다.
그런데, li태그를 하나만 사용해도 되지 않을까?
저 태그는 분명 catItem 변수에 있는 li태그니까 말이다.

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

const here = document.querySelector('#app');
ReactDOM.render(favorites, here);

방법은 정말 간단하다.
중괄호 안에 해당 변수만 넣어주면 된다ㅋㅋㅋㅋ

여기서 드는 의문.
중괄호 안에는 그럼 태그만 들어갈 수 있는 걸까????
물론 아뉘~!!!!
중괄호 안에는 표현식이 들어갈 수 있다.

const foo = "hello world";

function foo2() {
  return "SUMMER";
}

const favorites = (
  <ul class="favorites">
    {catItem}
    {catItem}
    {catItem}
    {foo == "hello world" ? 'true' : 'false'}
    {foo2()}
  </ul>
);
const here = document.querySelector('#app');
ReactDOM.render(favorites, here);

바로 이렇게 함수도 들어가고~ 삼항 연산자와 같은 표현식도 들어간다~
굉장히 낯선 모습이군…. ㅎㅎㅎ
사용법은 차차 익혀가도록 해보잡… ㅎㅎㅎ!!!

li 태그가 아닌 다른 태그들도 같이 그리고 싶다면 어떻게 해야할까?

const mainCard = (
  <div class="main-card">
    <img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" alt="고양이" width="400" />
    <button>🤍</button>
  </div>
);

const title = (
  <h1>1번째 고양이 가라사대</h1>
);

const form = (
  <form>
    <input type="text" name="name" placeholder="영어 대사를 입력해주세요" />
    <button type="submit">생성</button>
  </form>
);

const app = (
    {title}
    {form}
    {mainCard}
    {favorites}
);

각 태그마다 변수로 지정해주고 그걸 app이라는 변수에 넣고,
app을 render 해주면 될 거라고 생각했는데 그게 아니었다.
에러가 나는데 그 이유는 바로 최상위 태그는 딱 하나만 쓸 수 있어서라고 한다.
저 태그들의 최상위 태그를 지정해줘야 한다는 소리다.

const app = (
  <div>
    {title}
    {form}
    {mainCard}
    {favorites}
  </div>
);

짜잔!
이렇게 최상위 태그로 감싸주면 해결이 되는 것을 확인 할 수 있다.