React21 [React] 스크롤에 따라 navagation fixed 백발백중하는 명사수... 부딪혔다. 프로젝트 중에. fix 죄송합니다. 다시 하겠습니다. 프로젝트를 진행하던 중 화면의 스크롤 값에 따라 고정 너비를 가진 header가 상단에 position:fixed로 붙는 인터랙션을 구현해야 했다. 대충 감은 오는데 jQuery에서나 오던 감으로는 React에서 적용하기에 힘들 것 같아서 또 참지 못하고 먼저 구글링으로 검색을 해봤다. 상대를 알고 나를 알면 백전백ㅅ... 오케이. 일단 지금까지 들여왔던 습관 중 하나를 꺼냈다. 해야 하는 일 리스트로 적어보기 스크롤 값 가져오기 원하는 스크롤 값에 나타날 css 만들어 놓기 크게 2가지로 생각을 하고 실행에 옮겼다. 1. 스크롤 값 얻어와서 저장하기 const [scrollY, setScrollY] = useSta.. 2023. 1. 17. [React] slide API 없이 슬라이드 구현하기 이거 하다가 맥북 반대로 몇 번이나 접을 뻔했네 ^_^ ㅅ... 사랑해 내 맥북... slide API에게 언제까지나 의존할 수 없다. 라고 했지만 진짜 slide API의 중요성을 너무나도 느끼는 일주일이었다. (물론 작업기간 3일) 언제나 이론상으로 완벽한 코드지만 npm start와 새로고침 한번 한 번이 이렇게 무서웠던 적은 처음이다. 오류가 무서운 게 아니라 이 문제가 해결되면 다음엔 어떻게 로직을 연결시키지?라는 게 제일 컸던 것 같다. (쫄보) 갑자기 뜬금없지만 성장한 점이 꽤 있는 듯 하다. ? 일단 useRef를 사용해 보고 useState와 useEffect를 한 번에 사용해 본 점이 가장 크지 않나 싶다. 각각 hook들이 뭘 하는지 어떤 장점을 갖고 있고 어떻게 사용해야 하는지 확실.. 2023. 1. 17. [React] useRef (+ useRef로 버튼 슬라이드 만들기) 리액트.. 늘 새로워... 짜릿해... 1. useRef란? 일단 useRef는 앞에 use가 붙어있는걸 보아하니.... 왠지 React hool이 아닌가... 했지만 정확히 맞았다. React hook이 맞다. 그렇다면 또 설명을 참을 수 없기 때문에 개념을 먼저 잡고 가보자. useState()나 useEffect()처럼 많이 쓰이지는 않지만 특정한 DOM를 잡아서 그 DOM을 변경할 수 있는 장점이 있다. 리액트를 사용할 때 간혹 DOM을 직접 선택해서 엘리먼트에게 특정 스타일을 주거나, 스크롤바 위치를 가져오거나, 페이지를 렌더링 했을 때 input에 focus가 돼야 한다거나 그럴 때useRef라는 hooks함수를 사용한다. 2. useRef의 예시 나만 그러는지 모르겠지만 예시를 사용함으로써 .. 2023. 1. 17. [React] 리스트 검색 기능 / 컴포넌트 재사용 지나친 음주는 건강에 악영향을 미칩니다. 예전부터 구현해보고 싶었던 기능 중에 하나가 검색했을 때 단어마다 내가 검색하고자 했던 키워드가 나오는 기능을 구현해보고 싶었다. 하지만 무서워서(?) 시도해보지 않았지만 이번에 좋은 예제를 받아 도전을 해봤다. 함수형 컴포넌트입니다. 어떤 기능을 구현하니 ? open API에서 useEffect와 fetch 그리고 setState 사용해서 데이터 로딩 처리 검색 컴포넌트에서 정의한 function을 넘겨주고 값을 setState를 사용해서 저장 filter()를 사용해서 받아온 리스트의 list.name에 값과 검색 컴포넌트에서 작성한 리스트의 값이 일치하는 리스트를 보여주기 크게 말하면 이렇게 3가지로 나뉜다. 벌써 무섭다 1. 데이터 로딩 우선 fetch 함.. 2023. 1. 17. 이전 1 2 3 4 5 6 다음 반응형
