rendering

음악차트가 데이터화 되어있는 json 파일로 react 및 css 연습을 해보았다.

input에 들어가는 value값과(검색한 텍스트) 받아온 데이터를(음악차트정보) 비교하여 filter로 걸러주고 render함수 아래 변수 선언을 해주었다.

그 변수를 map으로 돌려주었다.

렌더링 순서는 어떻게 될까?

검색창에 검색 > onChange실행 > 함수실행 > setState(input의 value값 저장) >
렌더링 > filter로 걸러진 filterSong 맵으로 돌려짐

조건부 렌더링

jsx.. 고수가 되고싶다..

{m.state === "상승" && <span className="statusup">상승</span>}
{m.state === "하강" && <span className="statusdown">하락</span>}
{m.state === "유지" && <span className="status">유지</span>}

맵으로 돌려지는 요소의 key값인 state의 value값을 비교하여 해당 요소가
'상승','하락','유지' 조건 3가지를 비교하여
&& 후의 span태그로 출력되게 했다.

조건에 따라서 출력되는 것이 다르게끔 해주는 것이 jsx의 가장 큰 강점인것 같다.
활용 잘 해보자