(React) 조건에 따라 Component 표시 / 숨기기

조건에 따라 해당 Element나 Component를 표시하고 숨길 때, hook {useState}을 사용하는 방법 (코드보단 원리를 보는게 응용하기 좋을 것 같아 로직위주로 정리) 1. hook에서 useState로 state변수를 생성: 해당 state가 true가 되거나 값이 채워지면 요소가 보이게 하기, 여기서는 boolean을 사용하였다 2. 조건이 만족되면, setState를 이용해 state를 변경 3. component를 return할 때, 해당 state변수가 참이라면, 보여질 수 있도록 […]

Read more
React : responsive navbar 구현

미리보기 Navigation 구조 1.MenuItems.js Navigation에 들어갈 list의 data (title, url, className *nav-links-mobile은 mobile 화면에서만 보일것) 2. Button.js / Button.css Button Component (Navigation에서는 Desktop에서 Sign-Up Button 사용) 3. Navbar.js / Navbar.css clicked가 false 일 땐 toggle == bars && menu className = .nav-menu clicked가 true 일 땐 toggle == times && menu className = .nav-menu.active MenuItems에서 […]

Read more