[TIL #24 WECODE] React 컴포넌트 재사용 연습

210315 WECODE #24 React 컴포넌트 재사용 연습

주말동안 React를 연습해보기 위해 두가지 과제를 진행해보았다.
초록색은 Westagram 과제와 같이 컴포넌트를 재사용하는 연습이고
노란색은 새로 알게된 구현 사실이다

1. 본죽 사이트

• json파일의 데이터는 "isNew" : true "isBest" : true

• {isNew ? <p className="newMark">NEW</p> : null} className을 활용한 삼항연산자에서 의미없는 null값을 없애려면?

  {isNew && <p className="newMark">NEW</p>} 조건부 렌더링을 선언하여 항상 true값만 받는다 !!

2. monster 과제

• 검색 필터 기능

  this.state.monsters.filter((word) => word.name.toLowerCase().includes(this.state.userInput)

  console.log를 찍어보며 구현하면 훨씬 쉬워진다.
  console.log(word) : this.state.monsters 전체 내용
  console.log(word.name) : name값이 들어온다

  toLowerCase() : 소문자로 바꾼 후 검색하면 대문자까지도 검색할 수 있다는 사실!!

  includes(this.state.userInput) : el.target.value 즉, 입력하는 단어들을 찾아주겠다는 의미!