수끼옹

나는 지금 NHN 홈페이지를 리디자인 후 그걸 바탕으로 사이트를 다시 만들어보는 중이다. '소개' 페이지를 만들던 중 기존의 기본hover 기능만으로는 부족한 hover효과를 만들어야 했다. 0:11 동영상 default 값으로 버튼 하나에 hover 효과가 넣어져 있고, 다른 버튼에 mouseon이 되면 그에 맞게 hover 효과가 적용되는 기능이다. 바로 여기서 눈치를 챘어야 했다. state함수를 쓰면 되는 것이다. 👉 원리 버튼을 클릭했을 때 onMouseOver 이벤트로 state 값을 변경시키고, state값과 버튼의 id값이 같으면 스타일 컴포넌트의 id값을 준다. 👉 순서 state 함수를 만든다 -> onMouseOver 이벤트로 state를 변경시킨다 -> state값과 버튼의 id값을..

안녕하세요? 오늘은 tab 버튼을 클릭하면 그에 맞는 컨텐츠들이 뜨도록 만들어 보겠습니다? 먼저 결과물 입니다. default 값은 버튼0이 선택되고 내용0이 띄워져 있는 것이고, 버튼 1을 클릭하면 내용1로, 버튼2를 클릭하면 내용2로 바뀌게 동작합니다. 동작원리 state와 조건문을 이용해 onClick 이벤트로 버튼을 클릭할 때마다 그에 맞는 컨텐츠의 state값을 변경해주면 된다. code 1. 탭을 생성한다. (저는 부트스트랩에서 Nav를 검색한 뒤 가져왔습니다.) import Nav from 'react-bootstrap/Nav'; 버튼0 버튼1 버튼2 2. 탭에 따른 컨텐츠를 띄우기 위해 state를 생성한다. let [tab, setTab] = useState(0); state가 0이면 내..