리액트 공식문서 과제 오답노트

intro

안녕하세요, 오늘도 리액트 공식문서 읽기로 돌아왔습니다.

이번시간이 공식문서 관련해서 포스팅하는건 마지막같네요.

해당 게시글은 리액트 공식문서에서 파트별로 마지막에 챌린지를 하는 부분에서

어렵거나 헷갈렸던 코드들을 정리해보았습니다.

그럼 바로 start~

 

---

 

컴포넌트에 Props 전달하기

function Card({ children, title }) {
  return (
    <div className="card">
      <div className="card-content">
        <h1>{title}</h1>
        {children}
      </div>
    </div>
  );
}

export default function Profile() {
  return (
    <div>
      <Card title="Photo">
        <img
          className="avatar"
          src="https://i.imgur.com/OKS67lhm.jpg"
          alt="Aklilu Lemma"
          width={100}
          height={100}
        />
      </Card>
      <Card title="About">
        <p>Aklilu Lemma was a distinguished Ethiopian scientist who discovered a natural treatment to schistosomiasis.</p>
      </Card>
    </div>
  );
}

 

<card>태그 내부에 있는 것들은 모두 children이라는 예약된 props로 들어감.!
children의 개념을 잘 몰랐어서 어떻게 img태그의 요소들이 props로 들어가나 했었다!

---

조건부 렌더링

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>
          {name + ' ✅'}
        </del>
      ) : (
        name
      )}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item
          isPacked={true}
          name="Space suit"
        />
        <Item
          isPacked={true}
          name="Helmet with a golden leaf"
        />
        <Item
          isPacked={false}
          name="Photo of Tam"
        />
      </ul>
    </section>
  );
}

Item컴포넌트 내부에서 삼항연산자를 사용하는 것이 때로는 헷갈렸다. 

저 안에서 많이 쓰이는 패턴이라고 들어서 삼항연산자 사용에 익숙해져야겠다.

또한 and연산자도 조건부 렌더링을 할때 사용이 되는데,

return (
  <li className="item">
    {name} {isPacked && '✅'}
  </li>
);

이런식으로 사용하여, ispacked면 체크를 렌더링 하고, 그렇지 않으면 아무것도 렌더링 하지 않는다는 것을 의미한다.

 

---

 

이벤트에 응답하기: 해당코드의 문제점이 뭘까?

export default function LightSwitch() {
  function handleClick() {
    let bodyStyle = document.body.style;
    if (bodyStyle.backgroundColor === 'black') {
      bodyStyle.backgroundColor = 'white';
    } else {
      bodyStyle.backgroundColor = 'black';
    }
  }

  return (
    <button onClick={handleClick()}>
      Toggle the lights
    </button>
  );
}

이 코드에서 return문에서 handleClick옆에 괄호를 붙혀 렌더링 중 호출한다는 오류가 발생되게금 했다.

()호출을 삭제하여 <button onClick={handleClick}>으로 수정하면 잘 작동한다.

 

260219
다음 번 공부할 내용은 상호 작용성 더하기 부분이다.

---