React125 React(100) 커스텀 셀렉트 박스에서 옵션 선택하기 셀렉트 박스와 클릭시 등장하는 옵션 메뉴를 직접 만들어 보았다 :) 이번 포스팅에서는 UI 보다는 기능적인 측면만 다루어 보았다 (작년인가 재작년에 임시저장만 해놓고 미루다 정리해놓은게 아까워서 올려본다) 결과화면 미리보기 React(100) 커스텀 셀렉트 박스에서 옵션 선택하기 일단 메뉴배열을 useState 를 사용해서 선언해주자 const [menu, setMenu] = useState(['메뉴1', '메뉴2', '메뉴3', '메뉴4']); const [menuItem, setMenuItem] = useState('메뉴1'); // 선택된 메뉴 아이템 const [showMenu, setMenu] = useState(false); // 옵션박스 열고 닫힘 여부를 알려주는 값 옵션박스에서 메뉴를 고르.. 2023. 9. 16. React(99) 버튼 클릭시 동적으로 테두리색 변경하기 작년인가 재작년에 임시저장만 해놓고 미루다 정리해놓은게 아까워서 올려본다. 아주 심 - 플하게 동작하는 버튼 선택 기능이다 :) 버튼 인덱스를 저장할 상태 변수를 만들자 const [selectedIndex, setSelectedIndex] = useState(0); 핵심은 클릭해서 저장된 selectedIndex 와 === 매핑된 index 가 같을 경우에만 active 클래스가 추가 된다는 점이다. {buttonItems.map((item, index) => ( setSelectedIndex(index)} > {item.title} ))} 2023. 9. 6. React(98) Slick 슬라이더와 커스텀 탭 연동하기 (Feat. slickGoTo) slick 슬라이더 두번째 포스팅이다 지난번에는 슬라이더를 이동하면 탭이 선택이 되도록 만들어 보았는데 이번에는 커스텀 탭을 클릭하면 슬라이더가 이동하도록 만들어볼 것이다. React(97) Slick 슬라이더와 커스텀 탭 사용하기 slick 을 이용하여 슬라이더를 만들어보았다. 커스텀 탭을 추가하여 배너 움직임에 따라 탭도 자동으로 움직이도록 해보자 처음에는 막막했지만 하다보니 어떻게든(?) 되더라 다음처럼 화면에 한 devbirdfeet.tistory.com React(98) Slick 슬라이더와 커스텀 탭 연동하기 (Feat. slickGoTo) slick 컴포넌트의 내장 Setting 기능 중 바로 요 기능을 이용해볼 것이다. BannerSlider.tsx import Slider, { Setti.. 2023. 8. 16. React 실행오류 - URIError: URI malformed 상황인즉슨 이렇다. 검색 서비스를 개발 중이었다. 검색창 내에 특수기호를 넣고 검색하면 에러가 발생했다. 쉽게 말해서 검색어를 입력하고 엔터를 뙇 치면, URL 에 ?search={검색어 키워드} 형식으로 반영이 되는 구조였다. 검색어를 맨처음 window.location.search 로 받아오면 인코드된 문자열로 보인다 하지만 웹사이트에서 "가독성" 을 위해서는 읽기 쉽게 디코드해줘야 된다. 그래서 나는 디코드를 해줬다. const searchURL = decodeURIComponent(window.location.search); 즉, /search?search=캐릭터 와 같다 하지만 여기에 #, % 같은 몇몇 특수 문자가 들어가면 에러가 터지게 된다. 나는 문제해결을 위해 머리를 굴려 보았다. 일단.. 2023. 8. 11. React(97) Slick 슬라이더와 커스텀 탭 연동하기 (Feat. afterChange) slick 을 이용하여 슬라이더를 만들어보았다. 커스텀 탭을 추가하여 배너 움직임에 따라 탭도 자동으로 움직이도록 해보자 다음처럼 화면에 한장씩 보이는 싱글 슬라이더가 있다. 슬라이더 아래에는 커스텀 탭이 위치한다. 탭을 클릭하면 해당 슬라이더로 이동한다. 또한 [ ] 버튼으로 슬라이더를 이동하면 탭이 선택된다. React(97) Slick 에 커스텀 탭 사용하기 코드를 짜기 전에 내손에 쥐어진 무기가 뭐가 있는지 살펴보자 👊(현실은 맨주먹) slick 컴포넌트의 내장 Setting 기능 중 바로 요 기능을 이용해볼 것이다. BannerSlider.tsx 우선 Tab 과 ImageSlider 컴포넌트를 임포트 해주자 import Slider, { Settings } from 'react-s.. 2023. 7. 12. React(96) useContext 로 상태값 관리하기 예전에도 useContext 에 대한 개념을 다룬 적이 있지만 이번에는 실무에 직접 적용해본 경험을 정리해보려고 한다. 예전에 공부할 때는 개념적으로만 알다가 막상 사용해보니 너무x10 편리하고 좋았다. useContext 를 사용하는 이유는 redux 를 사용하는 이유와 같다 → 전역적인 상태값(state) 관리를 위해서이다. 여러 컴포넌트를 거치며 props의 drilled down 지옥을 맞본 새발자는 redux를 사용하자니 store 가 비대해질 것 같아 고민이었다. 또한 전역적이라기에는 특정 캠페인 페이지 내에서만 사용이 되는 상태 값이기 때문에 효율적이지 않다는 생각이 들었다. 그래서 useContext 를 사용하기로 결심했다. 사이트 내 전역적으로 사용되는 data 의 경우는 redux 를 .. 2023. 6. 1. React(95) 리스트 더보기 기능 구현 오늘은 리스트 더보기 기능을 구현해보자 맨 처음에 아이템이 다섯 개만 보이는 리스트가 있다. [더보기] 버튼을 누르면 그 다음 5개를 더 불려오고 마지막 리스트가 나올 때까지 다섯 개씩 불려온다. 다 불러오게 되면 [접기] 버튼이 나오고 맨 처음 5개만 보이는 초기상태로 돌아가게 된다. 이것을 구현하기 위해서는 두가지 방법이 있다. 1. 더보기를 누를때마다 getList api 를 호출하여 부분적으로 받아오는 방법이 있고, 2. 처음에 getList api 를 호출하여 한꺼번에 받아온 배열을 프론트에서 보여주는 방법이다. 각각에 맞는 방법이 있겠지만, 나는 1번을 더 선호한다. 처음에 한꺼번에 전체 배열을 불러온다면 메모리를 그만큼 차지하게 되고, 만약 몇 만 건있는 데이터 배열이라면 과부하가 걸릴 수 .. 2023. 4. 25. React(94) useState 알아보기 (공식문서정리) updated 03/09/23 리액트에서 상태(state) 값은 매우매우 중요하다. 화면에서 일어나는 모든 변화들은 변수(state) 안에 담아서 표현될 수 있고, 업데이트도 자주 일어나기 때문에 렌더링(a.k.a 새로고침) 되면서 항상 최신 데이터(a.k.a state)를 유지해야 한다. 너무너무 기본이지만 확실히 알고 넘어가고자 공식문서를 참고하여 한번 더 정리해보았다. React(93) useState 알아보기 (공식문서정리) useState 는 리액트 내장 함수이고, state 를 나타내는 변수로 사용할 수 있다. useState 는 리액트 훅이기 때문에 컴포넌트 최상단에서 호출하여야 한다. 조건문이나 반복문에서의 사용은 안된다. (strict 모드에서는 pure func 인지 검사을 위해 2번 .. 2023. 2. 21. React(93) TypeScript - 유사객체배열에서 원하는 값 사용하기 유사 객체 배열은 {객체 안에 {객체} 들이 배열} 처럼 들어있는 객체 형식을 말한다. 배열과 유사객체배열의 차이는 Array 와 Object 의 차이와 같다. 배열은 순서가 있으며, index 로 요소를 찾는다. 유사객체배열은 순서가 없으며, key 로 요소를 찾는다. 순서가 있고 없고의 차이는 크다. 배열은 메모리에서 연속된 공간을 할당 받는다. 그래서 맨 앞에 요소를 추가한다면 배열의 요소들은 순서대로 한 칸씩 옆으로 옮겨야만 한다. 객체는 메모리에 할당될 때 객체의 값에 참조 값을 통해 접근한다. 그렇기 때문에 순서를 가진 것 같이 나열해놔도 각자 주소가 다르다. 그래서 동적으로 생성되는 데이터의 경우 배열보다는 객체 형식으로 표현하는게 성능 상 더 좋다. 자 그럼 유사객체배열에서 원하는 값을 핸.. 2023. 2. 16. 이전 1 2 3 4 ··· 14 다음 반응형
