분류 전체보기

[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]); 이는 화면에 첫 렌더링이 될 ..

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

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

[LOLPAGO] React 설치 및 Header 구성(3)

🚗jsconfig.json 지난 시간에 이어 Header의 구성을 진행해보겠다. 보이는 화면과 같이 Header를 App.js에 import 했지만 오류가 발생했다. 오류 메시지를 읽어보면 경로 문제라는 것을 알 수 있는데 리엑트에서는 경로를 편하게 설정할 수 있도록 하는 json파일이 있다. 상대경로를 import하려면 "../../../../Main" 과 같이 복잡하게 파일의 경로를 설정해야 하는데, 절대경로를 쓰는것이 가독성이 훨씬 좋다. 디렉토리에 jsconfig.json파일이 있다면 해당 디렉토리가 JavaScript 프로젝트의 루트 디렉토리라는 것을 나타낸다. 그래서 jsconfig.json파일을 사용하면 프로젝트에 속한 파일, 프로젝트에서 제외할 파일 및 컴파일러 옵션을 나열할 수 있다. 여..

[LOLPAGO] React 설치 및 Header 구성(2)

🚕 Header 구성 페이지의 가장 위에 위치할 Header를 구성하려고 한다. 리액트의 장점이 모든 버튼, 링크, 체크박스 등을 컴포넌트화 한다는 것에 있으므로 마찬가지로 컴포넌트화하여 진행한다. 파일 구조에서 실제 컴포넌트들은 src폴더 안에 위치하게 된다. 아래와 같이 Header.jsx를 구성해주었다. Header를 구성하기 전 리액트가 실행되는 순서를 알고 있어야 한다. 즉, 화면을 만드는 흐름을 알아야 하는데 아래의 링크를 통해서 화면을 만드는 흐름을 확인할 수 있다. https://2t-hong.tistory.com/169 [React] 화면이 실행되는 방법의 이해 🚗 리액트에서의 화면 실행 순서 리액트를 하게 되면 자신이 실제로 작성하는 코드를 통해서 가장 처음 보여지도록 해야한다. 예를 ..