React에서 Click 한 메뉴만 활성화하는 법 (한글 및 띄어쓰기 메뉴 해결 방법)
2022. 5. 3. 19:44
개발이야기/React.js
에러발생 & 해결방법 구현해야하는 기능은 메뉴를 눌렀을때, 하나의 메뉴텝만 클릭이 되어야하고, 알맞는 스타일 효과를 주는 기능을 만들어야했습니다. 기존에는 includes 메소드를 사용하여 배열에 특정 요소가 포함되어 있는지를 판별하였지만, 이 방식은 한글 메뉴나 띄어쓰기를 포함한 메뉴에서 활성화 효과가 제대로 적용되지 않는 문제가 있었습니다. 문제를 해결하기 위해, 상태 관리를 통해 현재 선택된 메뉴의 인덱스를 추적하는 방식으로 개선하였습니다. 리액트의 useState를 활용해 선택된 메뉴의 인덱스를 상태로 저장하고, 이 상태를 업데이트하는 함수를 onClick 이벤트 핸들러로 설정하였습니다. 사용자가 선택한 메뉴만 활성화 효과를 받도록 수정하였습니다. 기존의 코드 className={ currentP..
[react] 프로젝트 초기세팅
2022. 5. 3. 04:21
개발이야기/React.js
가상환경세팅 후, 가상환경 상태에서 진행! 1. git remote update로 깃헙에 있는 브랜치를 최신으로 바꿔준다. 2. git clone 주소 3. ESLint, Prettier를 검색해서 각각 설치 4. /ROOT 경로에 아래 내용의 .vscode/settings.json 생성 { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.tabSize": 2, "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, }, "javascript.format.enable": false, "eslint.alwaysShowStatus": true, ..
[React] map()
2022. 4. 17. 23:12
개발이야기/React.js
map() 함수란? 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새 배열에 담아 반환하는 함수이다. react에서의 map()은 반복적인 컴포넌트를 효율적으로 보여줄때 사용한다. 위에 사진처럼 하나의 컴포넌트가 반복적으로 사용되고 있고, map()를 활용하면 그걸 효율적으로 만들 수 있다. 우선 공식문서부터 봐보면? 두개의 인자를 받는다. 1. 현재 요소의 값, 2. 현재 배열의 크기 fetch함수를 사용하여 mock data를 가져온다. state에 데이터를 저장한 뒤, 맵함수를 돌릴 부분에 {저장된데이터이름.map() } 형식에 맞춰 작성해준다.
[React] Link, Navigate, useNavigate의 차이점?
2022. 3. 21. 20:24
개발이야기/React.js
link 태그 사용자가 클릭해서 페이지를 이동하도록 할 때 사용하고 하이퍼링크 텍스트나 페이지를 이동하는 버튼, 이미지 등에 사용하면 되겠죠? 대부분의 경우 Link 만으로도 충분하다. 웹 앱을 만들고 싶을때, 웹 페이지 안에서 스무스하게 작동시키고 싶을때(클릭시 바로 이동해야 할 때) ex)nav bar, aside menu등, Navigate 특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용한다. (리다이렉트) ex) 쇼핑몰의 회원 전용 페이지에 로그인없이 들어와서 로그인 페이지로 리다이렉트하는 경우 쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우 useNavigate 훅 const navigate = useNavigate(); const ..
[React] SPA
2022. 3. 17. 15:41
개발이야기/React.js
SPA Single Page Application의 약자이다. 말 그대로 하나의 페이지 안에 웹에 필요한 모든 정적 리소스가 들어있는 것. 예전에는 어떤 웹 어플리케이션을 만들때, 여러 페이지로 구성되었다. A.html , B.html, C.html , D.html .... 또 페이지를 로딩할때마다 서버에서 리소스를 전달받아와서 렌더링했다. 즉, 웹 어플리케이션 뷰를 서버에서 담당했었다. 하지만, 규모가 커지고 사용자와의 상호 작용이 많아짐에 따라, 데이터 정보 전송 과부화로 인한 속도 저하 등 문제점이 생기게 되었다. 그래서 요즘 나오는 라이브러리 또는 프레임워크는 뷰 렌더링을 서버가 아닌 웹 브라우저가 담당한다. 예전에는 페이지를 요청할때마다 서버로 접속하여 받아왔기 때문에, 페이지가 매번 새로고침 ..