styled-component

• painless maintenace 속성
  컴포넌트에 스타일을 상속하는 속성을 찾기때문에
  다른 css파일들을 검색하지 않으므로 크기가 커져도 유지보수가 수월하다

두개는 같은 코드이다.

{isOpen && 
<ModalBackdrop>
            <ModalView>
              <span className="closebtn">&times;</span>
              <div className="string">HELLO 블레싱!</div>
            </ModalView>
</ModalBackdrop>
}

{isOpen === true ? 
<ModalBackdrop>
            <ModalView>
              <span className="closebtn">&times;</span>
              <div className="string">HELLO 블레싱!</div>
            </ModalView>
</ModalBackdrop>
: null
}

리액트에서 상태핸들링함수 만들때 유의사항
핸들링함수를 컴포넌트에 전달할때, 3가지 방식으로 전달된다.
1. onClick={openHandler}

 const openModalHandler = () => {
    setIsOpen(!isOpen);
  };

2. onClick={ () => selectHandler(idx)}

const selectMenuHandler = (index) => {
    setCurrentTab(index)
  };

3. onKeyup ={ (event) => addTags(event) }

const addTags = (event) => {
    let filtered = tags.filter((el)=> {
      return el === event.target.value; 
    })
    if(event.target.value !== "" && filtered.length === 0){ 
      setTags([...tags,event.target.value]);
    }
}

2번 방식의 경우 , 인자전달의 문제 때문.
3번 방식의 event는 event를 받아와서 함수를 실행해야 하기 때문?