custom-component

1.modal

const openModalHandler = () => {
    // TODO : isOpen의 상태를 변경하는 메소드를 구현합니다.
    setIsOpen(!isOpen)
  };
  	로 상태를 바꾸는 함수를 구현한다

 {isOpen ?  
          <ModalBackdrop onClick={openModalHandler} >
          <ModalView>
          <ModalBtn onClick={openModalHandler}>x</ModalBtn> 
          hello codestates!
          </ModalView>
          </ModalBackdrop>
          : null}
          
  구조가 헷갈렸다 원래 과제코드를 다시 가면 ModalContainer 가 위에 태그로 존재하는데 이것은
  ModalContainer 안에 ModalBackdrop이 생기고 그안에 <ModalView>가 존재하기 때문에 저런식으로 안에다가 써주는 것이다 다만 아직의문인점 왜 onClick={openModalHandler}를 하나더 써줘야 하는가에 대하여의문이당

2.toggle

  > .toggle-circle {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #ffffff;
    transition : 0.2s
    // TODO : .toggle--checked 클래스가 활성화 되었을 경우의 CSS를 구현합니다.
  }
  > .toggle--checked{
      left: 26px;
    transition : 0.2s
    }
`;
스타일 컴포넌트에서 원이 어떻게 움직이는가 궁금했었는데 클래스가 .toggle--checked으로 변한경우 left쪽으로 px을 이동을 시켜주고 transition은 애니메이션처럼 이동을 보여주는 것이다
>는 자식컴포넌트를 가리키는 것같음 ->다시찾아보자

     <div className={`toggle-container ${isOn ?'toggle--checked' : '' }`}/>
        <div className={`toggle-circle ${isOn ?'toggle--checked' : '' }`} />
        
        기본 CSS에서는 템플릿 리터럴과 삼항 연산자를 활용해 조건부 스타일링을 적용할 수 있습니다.
   기본 삼항연산자에서 클래스를 이용하려고 할때 위에 있는 코드처럼  classname = {``}를 써서 할 수 있습니다 
   toggle-container의 css안에서 삼항연산자가 일어난다고 생각해도 될거같습니다

3.tab

return (
    <>
      <div>
        <TabMenu>
          {/*TODO: 아래 하드코딩된 내용 대신에, map을 이용한 반복으로 코드를 수정합니다.*/}
          {menuArr.map((el, index)=>{
             return <li key={index} className={`${currentTab===index ?'submenu focused': 'submenu'}`} 
            onClick={() => selectMenuHandler(index)}>{el.name}</li>
  }
          )}
   이부분도 헷갈렸다 
   1.우선 map을 사용한다 이때인자는 요소와 인덱스 2가지를 갖는다 인덱스는 고유한값을 나타내주는 key의 역할을 하므로 <li>태그 안에 따로 적어줘야한다
    <li className="submenu">{menuArr[0].name}</li>은 하드코딩을 한것인데 map으로 이거와 같이 나타내는 것이다
    즉 key={index} className={`${currentTab===index ?'submenu focused': 'submenu'}`} 는 
    className="submenu"를 나타내고  onClick={() => selectMenuHandler(index)}은 클릭할 당시를 나타내는 것이다 근데 좀헷갈림..
    쨋든 삼항연산자를 이용하여 내가 탭한 것과 인덱스가 같을때만 현재탭의 클래스를 바꿔주는 것이다 !
    밑에는 내가 클릭한 요소의 이름을 나타내줌.
    ->다시다시

4.tag

const removeTags = (indexToRemove) => {
    // TODO : 태그를 삭제하는 메소드를 완성하세요.
   let newfi= tags.filter((el, index)=> {return index !== indexToRemove})
   setTags(newfi)
  };
  삭제하는 함수
  삭제할때는 filter함수를써주는 것이 좋다 단 여기서 Index의 요소까지 넣은것은 왜그런가 궁금했다 생각해보니 
   <ul id="tags">
          {tags.map((tag, index) => (
            <li key={index} className="tag">
              <span className="tag-title">{tag}</span>
              <span className="tag-close-icon" onClick={()=>removeTags(index)}>&times;
              </span>
            </li>
          ))}
    이부분에서 map을 이용해서 클릭시 함수에 인덱스를 넘겨주는것이 보인다 결국 넘겨주는 것이 인덱스라서 필터를 할때도 인덱스를 이용해서 없애는 것이라고 생각이 된다

*헷갈린 개념
onclick안에 변수를 넣을때와 안넣을때
onClick={openModalHandler} 와 익명함수로 쓰는 법이 있다
왜 onClick={openModalHandler(index)}처럼 안에 요소를 넣으면 안되는가?
이것은 리랜더링을 할떄마다 실행이 되기 때문이다 우리가 원할때 랜더링이 되는 것이 아닌 업데이트가 될때마다 랜더링이 되기때문에 익명함수로 쓰거나 그냥 이벤트함수 onClick={openModalHandler}이게 이벤트함수 처럼 쓰는 것이다