[TIL - 2022.8.2~8.3 React State & Props]

Jeong Ha Seung·2022년 8월 3일

부트캠프 코드스테이츠 프론트엔드

부트캠프

목록 보기

26/51

오늘 공부한 내용

props

컴포넌트의 속성을 의미하며, 주로 상위 컴포넌트에서 하위 컴포넌트에 값을 전달할 때 사용한다.

props.children

props를 전달하는 또 다른 방법으로 children을 이용하여 해당 value에 접근이 가능하다.

const App = () => (
  <Category>
    <li>First item.</li>
    <li>Second item.</li>
    <li>Another item.</li>
  </Category>
);

const Category = ({ children }) => {
  return <ul>{children}</ul>;
};

state

값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다.

state 사용법

state 사용 시 주의점

예를 들어 state[1]=3; , state.push(1); 이런식으로 강제 변경하면 리렌더링이 일어나지 않는다.
따라서 setState 함수를 이용해 변경해야 한다.

twittler state and props 과제

Bare Minimum까진 문제가 없었지만 Advanced 과제인 트윗 필터링과 삭제 구현이 좀 힘들었다.

트윗 필터링

  const handleSelectClick = (event) => {
    setNewData(dummyTweets.filter((el) => el.username === event.target.value));
  };

<div className="tweet__selectUser">
 <select onChange={handleSelectClick}>
  <option value="">-- click to filter tweets by username --</option>{options}</select>

트윗 삭제 구현

  const handleDelete = (event) => {
    setNewData(
      newData.filter(
        (element) => element.id !== Number(event.target.attributes.id.value)
      )
    );
  };