React

[React] map함수 사용법

🚗 map 만약 아래와 같은 배열이 있다고 했을 때 map함수를 이용하면 값과 인덱스를 인자로 받아 자동으로 for문을 돌려서 값을 뺴준다. const arr = [ 10, 20, 30, 40, 50 ]; arr.map((item, index) => { console.log(index, item); }); 다음과 같이 작성하면 0 10 1 20 2 30 3 40 4 50 이 순서대로 출력된다.

[React] 리액트 훅스(3) - useLocation, useNaviation

🚗 useLocation 리액트 훅스에서 useLocation은 현재의 URL을 대표하는 location 객체를 반환한다. 이전 블로그에서 확인했던 것과 같이 URL이 바뀔 때마다 새로운 location을 반환하는 useState처럼 생각할 수 있다. 새로운 페이지가 로드될 때마다 web analytics tool(웹 분석 도구)를 사용하는 새로운 "페이지 모습"의 이벤트를 작동시키려는 상황에서 유용하게 사용할 수 있다. 이때 location 객체는 아래와 같다. [Chat GPT] pathname: URL에서 도메인 뒤의 경로를 나타냅니다. 예를 들어, URL이 http://example.com/about인 경우, pathname은 /about이 됩니다. search: URL의 쿼리 스트링을 나타냅니다..

[React] 리액트 훅스(1) - useState

🚗 useState state란 컴포넌트의 상태를 의미한다. useState는 컴포넌트의 상태를 간편하게 생성하고 업데이트 시켜주도록 사용한다. 기본적인 형태는 아래와 같다. const[state, setState] = useState(초기값); 초기값을 인자로 넣으면 state와 setState라는 두 가지 요소를 배열 형태로 리턴해준다. 우리의 현재 상태값이 state라는 변수에 들어가게 되는데 이를 변경하고 싶다면 setState를 이용해서 변경할 수 있다. 내부의 변수 이름은 우리가 원하는 대로 변경할 수 있다. 🚓 useState 사용해보기 우리는 개발을 진행하면서 메뉴에 선택한 화면을 보여주도록 하는 state 를 설정하도록 해보자. const [selected, setSelected] = u..

[React] PNG파일을 SVG파일로 변경하는 방법

🚗 Image Magick 유료, Adobe 등을 이용하여 PNG파일을 SVG파일로 변경할 수도 있지만, ImageMagick이라는 오픈소스 프로그램을 사용해도 간단하게 변경할 수 있다. 윈도우즈 환경에서는 아래의 실행파일을 직접 다운로드 받아야 한다. https://imagemagick.org/script/download.php#windows ImageMagick Create, Edit, Compose, or Convert Digital Images imagemagick.org 순차적으로 설치를 진행한 후에 체크박스를 선택하는 부분이 나오는데 아래 그림과 같이 선택하면 된다. 설치를 완료한 뒤 환경변수 설정을 해준다. 새로 만들기를 해서 위와 같이 생성해주면 된다. 명령 프롬프트에 magick를 입력했..

[React] 화면이 실행되는 방법의 이해

🚗 리액트에서의 화면 실행 순서 리액트를 하게 되면 자신이 실제로 작성하는 코드를 통해서 가장 처음 보여지도록 해야한다. 예를 들어 내가 롤파고와 같은 전적검색서비스를 보여주고 싶은데 가장 첫 화면이 검색창이 뜨도록 하고 싶다. 해당 화면이 주소를 입력했을 때 가장 처음 보여져야 한다. 티스토리 블로그를 검색했을 때 아래의 사진과 같은 화면이 나오도록 해야한다. create-react-app을 했을 때 가장 먼저 보여지는 화면은 아래와 같다. 우리가 보여주고 싶은 화면을 보여줘야 하려면 어떻게 해야할 지 알아보겠다. 🚓 "index.html", "index.js", "App.js" 결론부터 말하자면 위의 파일들을 적절하게 설정해야 한다. index.html을 살펴보자. index.html 우선 index..