[react] 오답노트

노호준·2023년 2월 21일

CDD, CSS-in-JS

조건부 렌더링

<ModalBtn onClick={openModalHandler}>
          { isOpen ? 'Opened!' :  'Open Modal'}
</ModalBtn>

조건부 스타일링

class 2개로할거냐 1개로할거냐를 따지는 조건부 스타일링

<div className={isOn ? 'toggle-container toggle--checked' : 'toggle-container'}/>

map, filter의 두번째 인자는 index이다.

 {tags.map((tag, index) => {})}

useRef는 상태로접근하는것보다 dom으로 접근하는게 훨 낫겠다 싶을때 쓴다.

이벤트 전파 막기(원하는 타깃에서만 이벤트를 발생하게 하고 싶을때)

<ModalView onClick={(event) => event.stopPropagation()}>

항상 state값 바꿀때는 setState로 할것

  const removeTags = (indexToRemove) => {
    setTags(tags.filter((el,index) => index !== indexToRemove ))
  };

flex설정으로 가운데에 오지않는건 높이가 주어지지 않아서, height: 80%를 줘보자

top,bottom,left,right로 위치를 옮길수 있다.

export const ModalBackdrop = styled.div`
  // TODO : Modal이 떴을 때의 배경을 깔아주는 CSS를 구현합니다. 국룰
  background-color:rgba(0, 0, 0, 0.5);
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  display: flex;
  justify-content: center;
  align-items: center;
`;

이벤트핸들러의 사용차이

클래스 프로퍼티

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

<ModalBtn onClick={openModalHandler}>

핸들러함수에 전달할게 없을때 > 그냥 JSX안에 함수명 넣어준다.
2. 화살표함수

  const removeTags = (indexToRemove) => {
    setTags(tags.filter((el,index) => index !== indexToRemove ))
  };
<span onClick={() => removeTags(index)}>

앞에 있던 변수를 인자로 넣어줄 때(위 경우 index) 앞에 화살표함수꼴을 붙여줘야 작동한다.
3. 화살표함수+인자

  const addTags = (event) => {
    if(event.keyCode === 13 && !tags.includes(event.target.value) && event.target.value !== "" ){
      setTags([...tags,event.target.value]);
      event.target.value='';
    }
  };
onKeyUp={(event) => {addTags(event)}}