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] 리액트 훅스(2) - useEffect
🚗 useEffect 리액트 훅스에서 가장 중요하다고 생각하는 useEffect이다. 어떠한 컴포넌트가 마운트 됐을 때, 업데이트 될 때, 마운트 해제되었을 때 특정 작업을 처리할 코드를 실행시킬 때 사용할 수 있는 것이 useEffect이다. useEffect는 콜백함수를 사용하는데 두 가지 형태를 기억해야한다. 콜백함수 : 다른 함수가 실행을 끝낸 뒤 실행되는 콜백 되는 함수 첫 번쨰 인자로 콜백함수를 받는 형태 useEffect( () => { }); 이는 렌더링이 될 때 마다 실행된다. 첫 실행될 때, 다시 렌더링이 될 때 모두 실행된다. 첫 번째 인자로 콜백함수를 받고, 두 번쨰 인자로 배열을 받는 형태이다. useEffect( () => { }, [value]); 이는 화면에 첫 렌더링이 될 ..
[LOLPAGO] React 설치 및 Header 구성(1)
🚗 Git 설정 깃허브를 통해서 유지보수를 해야하므로 Git을 이용할 예정이다. 중요한 내용들이니까 Private로 만들었다. 다음과 같이 VScode에서 클론을 하면 레포지토리가 로컬에 생성된다. 해당 환경에서 실행을 할 것이다. 🚓 React 설치 우선 롤파고 프로그램을 개발하기 위해 React를 사용하려고 한다. React를 설치하기 위해서는 아래와 같은 절차를 거치면 된다. https://github.com/facebook/create-react-app GitHub - facebook/create-react-app: Set up a modern web app by running one command. Set up a modern web app by running one command. Contri..
[React] 화면이 실행되는 방법의 이해
🚗 리액트에서의 화면 실행 순서 리액트를 하게 되면 자신이 실제로 작성하는 코드를 통해서 가장 처음 보여지도록 해야한다. 예를 들어 내가 롤파고와 같은 전적검색서비스를 보여주고 싶은데 가장 첫 화면이 검색창이 뜨도록 하고 싶다. 해당 화면이 주소를 입력했을 때 가장 처음 보여져야 한다. 티스토리 블로그를 검색했을 때 아래의 사진과 같은 화면이 나오도록 해야한다. create-react-app을 했을 때 가장 먼저 보여지는 화면은 아래와 같다. 우리가 보여주고 싶은 화면을 보여줘야 하려면 어떻게 해야할 지 알아보겠다. 🚓 "index.html", "index.js", "App.js" 결론부터 말하자면 위의 파일들을 적절하게 설정해야 한다. index.html을 살펴보자. index.html 우선 index..