useState 썸네일형 리스트형 React 간단히 토글메뉴 구현하기 (useState) 리액트 관련해서 혼자 클론코딩식으로 버거킹 사이트를 모바일 버전일 때 특정해서 구현하고 있는데 어떠한 사이트든 사이드 메뉴, 혹은 내비게이션 바 부분을 토글식으로 구현해 놓은 곳은 많을 것이다. 한번 상태값을 관리해주는 useState훅을 이용해서 구현해보자 사진처럼 왼쪽 상단의 메뉴 버튼을 누르면 왼쪽에서 오른쪽으로 메뉴바가 쇼로록 나오게 만들면 되는 것이다. 우선 해줘야 할 것은 토글할 메뉴리스트의 상태를 관리하기 위해 useState를 사용해주는 것이다. import React,{useState} from 'react'; const Header = () => { const [isOpen, setMenu] = useState(false); // 메뉴의 초기값을 false로 설정 const toggle.. 더보기 <Reactjs>Input상태 관리 , 여러개 Input 상태 관리 저번에 숫자 값의 상태 관리를 useState 를 이용해서 해보았는데 마찬가지로 비슷하게 이번엔 문자값을 변화해주면서 간단한 예제로 정리해보자. 우선 InputSample이라는 컴포넌트를 하나 만들어준뒤에 실행시켜주면 이렇게 정적으로 내가 써준 내용이 보여진다. 이 상태에서 글을 입력하게 되면 이런식으로 상태값이 바뀌고 초기화 버튼을 누르게 되면 다시 빈칸으로 설정 되는 것을 볼 수 있다. 저번 숫자값을 동적으로 변화시키는 글과 달라진 점은 우선 event 를 인자로 받아서 target.value 를 써준 것인데 현재 태그에 입력되어 있는 텍스트로 값을 변화시켜야 되기 때문에 e.target.value 로 값을 세팅해준 것이다. 포인트는 'useState' 를 사용해준 것과 필요에 따라 event 속성을.. 더보기 <Reactjs>useState로 동적 문서 만들기 정적인 문서 말고 사용자와의 인터랙션을 통해 컴포넌트에서 동적으로 보여주기 위해 어떻게 하면 되는지 알아보장. 아주 고전적이고도 많이 본 숫자 증감을 예로 들어서 간단하게 원리만 파헤쳐 보겠다. 이런식으로 Counter 컴포넌트를 만들어준 뒤에 버튼을 눌러서 콘솔창을 확인해주면 +1 과 =1 이 잘 찍히는 것을 볼 수 있을 것이다. 아직은 저 0 이라는 값을 조절해주지 못하는데 'useState'를 이용해서 한번 조작해보겠당! 위 코드의 const [number, setNumber] = useState(0); number는 현재상태 , setNumber는 상태를 바꿔주는 함수, useState(0) 은 초기값으로 0을 넣어주겠다는 뜻이다. 바뀐 상태값을 보여줘야 하기 때문에 정적으로 0을 박아놨던 부분에.. 더보기 이전 1 다음
