헤더와 푸터
헤더와 푸터는 따로 컴포넌트로 만들어 사용할 때 추가해주면 된다.
토글
열려/닫혀 있는 상태를 boolean type의 state로 관리하고, 클릭하였을 때 state를 바뀌게 설정한다.
- 만약 열려있다면? 아래 컴포넌트를 보여줌
- 만약 닫혀있다면? 렌더링할 때 포함시키지 않음
호버
마우스 올리면 글씨 색상 바뀌게 하는 것도 state로 관리할 수 있다.
아래 처럼 직접 style을 지정해줄 수도 있다.
<a href={link} onMouseOver={(e) => (e.target.style.color = "#61dafb")} onMouseOut={(e) => (e.target.style.color = "white")}>{name}</a>
꼬꼬마 개발자 구승효입니다!