[💻 코드스테이츠 FE 44기]custom-component 과제 - 1

✔️ 시작

이전 Figma로 작업했던 모달창, 토글 버튼, 탭 메뉴 등을
직접 구현하는 과제를 페어분과 같이 진행했다.

📍 알게된 부분

• 삼항 연산자를 사용해 버튼 클릭 시 화면 다르게 노출하기

const [isOpen, setIsOpen] = useState(false);
.
.
.
return(
  {!isOpen
	? "Open Modal"
	: "Opened!"
	}
)

• { , } 만 있다면 함수, 조건문 등을 넣어 해결 할 수 있다.

//상황에 따라 클래스 명 다르게 주기
<div className={`toggle-container ${isOn ? "toggle--checked" : ""}`} />

• 이벤트 핸들러에 인자를 넣어줘야하는 상황이 있을 경우 콜백 함수로 만들어 준다. () => {}

//onClick={selectMenuHandler(index)} === 에러
<button
onClick={()=>{
	selectMenuHandler(index)
}}>
클릭
</button>

• event.target 현재 선택된 요소를 알려준다.

event.target.value // 해당 요소의 value 값 가져오기

• event.key 를 이용해 어떤 키를 클릭 했는지 알아 낼 수 있다.

event.key === 'Enter' // Enter키를 누른 상태인 경우
event.key === "ArrowDown" // 아래 방향키를 누른 상태인 경우
event.key === "ArrowUp" // 위 방향키를 누른 상태인 경우
event.key === "ArrowRight" // 오른쪽 방향키를 누른 상태인 경우
event.key === "ArrowLeft" // 왼쪽 방향키를 누른 상태인 경우

• 자식 요소에 스타일을 주고 싶을 때 >사용

export const DropDownContainer = styled.ul`
  background-color: #fff;
  > li {
    background-color: #000;
  }
`

✏️ 마치며

이번 페어 새로운 페어분은 너무 잘 하셔서 거의 배우면서 진행한 거 같다.
덕분에 많이 알게 되었고 어떠한 상황에 어떤 식으로 작성해야 하는지 알 수 있었던 시간이였다.

많은 도움을 주지 못해 미안한 마음이다.
다음 날은 과제를 스타일링 하는 시간으로 그 때에는 꼭 도움이 되었으면 좋겠다.