Library-Framework/React23 [React] DOM 선택 시, querySelector 대신 useRef 사용하기 문제 상황 현재 사용자가 위치한 페이지에 따라 메뉴 탭의 색을 바꿔주고 싶었다. 이를 구현하기 위해 내가 생각한 방법은 다음과 같다. 1. 현재 위치한 페이지의 링크 끝에 적힌 탭 이름을 가져온다. 2. 탭 이름을 메뉴 탭의 이름과 비교한다. 3. 탭 이름이 메뉴 탭의 이름과 일치한다면, 색을 바꿔준다. 오류 TypeError: Cannot read properties of null (reading 'style') 원인 HTML이 렌더링되기 전에 JS가 작동되었기 때문에, style 속성값을 읽어올 수 없어 발생한 문제였다. 해결 방법 리액트에서는 DOM을 선택할 때, querySelector가 아닌 useRef를 사용한다고 한다. useRef() .current 프로퍼티로 전달된 인자(initialVa.. 2022. 10. 24. [React] favicon 변경하기 react-create-app으로 프로젝트를 시작하면, 브라우저 탭의 왼쪽에 있는 favicon이 리액트 로고로 뜬다. (아래 그림에서 크롬 로고 위치에 말이다) 내 서비스에 맞는 아이콘을 디자인해서 그것으로 변경하고 싶을 때는 아래와 같이 하면 된다. 1. 아이콘 디자인 하기 일단 디자인 한 아이콘 파일이 있어야 한다. 2. favicon으로 만들기 https://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.. 2022. 10. 24. [React] react-scroll 라이브러리 사용법 및 주의사항 https://www.npmjs.com/package/react-scroll react-scroll A scroll component for React.js. Latest version: 1.8.7, last published: 6 months ago. Start using react-scroll in your project by running `npm i react-scroll`. There are 606 other projects in the npm registry using react-scroll. www.npmjs.com 사용 순서 1. 설치하기 npm install react-scroll 2. 불러오기 다 불러올 필요는 없고, 쓸 것들만 불러오면 된다. import * as Scroll from.. 2022. 10. 3. [React] Hooks & Custom Hooks Hook은 리액트 버전 16.8부터 새로 추가된 요소로, class를 작성하지 않고도 state와 다른 react 기능을 사용할 수 있도록 해준다. 리액트로 개발을 할 때 자주 사용하는 useState() 와 useEffect()도 Hook의 한 종류이다. Hook을 사용하는 이유 hook을 사용하지 않고 리액트로 개발 시, 크게 3가지의 문제점이 있다고 한다. 1. 컴포넌트 사이에서 상태 로직을 재사용하기 어려움 하지만 hook을 사용하면 상태 관련 로직을 재사용할 수 있으며, 독립적인 테스트와 재사용이 가능해진다. 2. 복잡한 컴포넌트들은 이해하기 어려움 서로 비슷한 일을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다. 3. class는 사람과 기계를 혼동시킴 class를 사용하.. 2022. 9. 19. 이전 1 2 3 4 5 6 다음
