본문 바로가기

리액트8

[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] Hooks & Custom Hooks Hook은 리액트 버전 16.8부터 새로 추가된 요소로, class를 작성하지 않고도 state와 다른 react 기능을 사용할 수 있도록 해준다. 리액트로 개발을 할 때 자주 사용하는 useState() 와 useEffect()도 Hook의 한 종류이다. Hook을 사용하는 이유 hook을 사용하지 않고 리액트로 개발 시, 크게 3가지의 문제점이 있다고 한다. 1. 컴포넌트 사이에서 상태 로직을 재사용하기 어려움 하지만 hook을 사용하면 상태 관련 로직을 재사용할 수 있으며, 독립적인 테스트와 재사용이 가능해진다. 2. 복잡한 컴포넌트들은 이해하기 어려움 서로 비슷한 일을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다. 3. class는 사람과 기계를 혼동시킴 class를 사용하.. 2022. 9. 19.

[React] Carousel (반응형 이미지 / 가로 스크롤) 사용법 (JS) http://react-responsive-carousel.js.org/ http://react-responsive-carousel.js.org/ React Responsive Carousel Storybook Check it out these cool demos created using storybook. The source code for each example is available here. Summary Installing npm install react-responsive-carousel --save Demo Carousel Code: Contributing Please, feel fre react-responsive-carousel.js.org 물론 직접 구현할 수도 있지만.. 잘 나와있는 .. 2022. 8. 23.

[React] effects 안한 지 오래되서 잠깐 복습 쭈고... create-react-app으로 작업할 때의 포인트는 "분할하고" "정복하는' 것 create-react-app은 css 코드를 javascript 오브젝트로 변환시켜줌 무작위적인 랜덤 class 이름을 가짐 컴포넌트를 분리해서 독립적으로 만들 수 있음 기억해둘 것 state가 변화할 때 모든 component와 코드는 다시 실행된다. 처음 한번만 실행되고 그 다음에는 실행되지 않게 하려면? useEffect 2개의 argument를 가짐 1번 argument "effect" : 딱 한번만 실행하고 싶은 코드 2번 argument "deps" : dependency. 이 부분이 변화할 때 코드를 재실행시킴 코드가 딱 한번만 실행될 수 있도록 보호해줌 [] 특정 조.. 2022. 7. 19.

이전 1 2 다음

티스토리툴바