LOLPAGO

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

🚗 useEffect를 이용한 Header 구성 useEffect를 이용하여 이벤트가 발생할 때 화면을 렌더링 할 수 있다. 아래의 링크를 참고하여 useEffect와 usLocation에 대해 알아보고 오는 것을 추천한다. https://2t-hong.tistory.com/175 [React] 리액트 훅스(2) - useEffect 🚗 useEffect 리액트 훅스에서 가장 중요하다고 생각하는 useEffect이다. 어떠한 컴포넌트가 마운트 됐을 때, 업데이트 될 때, 마운트 해제되었을 때 특정 작업을 처리할 코드를 실행시킬 때 사용할 2t-hong.tistory.com https://2t-hong.tistory.com/176 [React] 리액트 훅스(3) - useLocation, useNaviat..

[React] 리액트 훅스(2) - useEffect

🚗 useEffect 리액트 훅스에서 가장 중요하다고 생각하는 useEffect이다. 어떠한 컴포넌트가 마운트 됐을 때, 업데이트 될 때, 마운트 해제되었을 때 특정 작업을 처리할 코드를 실행시킬 때 사용할 수 있는 것이 useEffect이다. useEffect는 콜백함수를 사용하는데 두 가지 형태를 기억해야한다. 콜백함수 : 다른 함수가 실행을 끝낸 뒤 실행되는 콜백 되는 함수 첫 번쨰 인자로 콜백함수를 받는 형태 useEffect( () => { }); 이는 렌더링이 될 때 마다 실행된다. 첫 실행될 때, 다시 렌더링이 될 때 모두 실행된다. 첫 번째 인자로 콜백함수를 받고, 두 번쨰 인자로 배열을 받는 형태이다. useEffect( () => { }, [value]); 이는 화면에 첫 렌더링이 될 ..

[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] 화면이 실행되는 방법의 이해 🚗 리액트에서의 화면 실행 순서 리액트를 하게 되면 자신이 실제로 작성하는 코드를 통해서 가장 처음 보여지도록 해야한다. 예를 ..

[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..