프로그래밍/React8 [React] 여러가지 CSS방식 - Styled component React에서 css를 사용하는 방법은 몇 가지가 있다. - 하나의 css파일에서 애플리케이션 전체에 스타일 정의하기 // 클래스 이름의 중복을 피하기 위해 신경 써야 한다. - JSX 내부에서 css 정의하기 // 코드 가독성이 떨어지고 css의 다양한 속성 활용이 어렵다. - css 모듈화 하기 // 각 컴포넌트 별로 스타일을 정의할 수 있어서 클래스 이름이 중복되는 걱정을 안 해도 돼서 편하다! // 하지만 매번 요소에 className={styles.~} 작성하는 것이 번거롭다. 개인적으로 중복되는 클래스 이름을 신경 쓰지 않는 것이 너무 좋았기 때문에 css를 모듈화 하는 방식을 사용해왔다. 이번에는 styled-components를 공부하면서 어떤 방식이 효율적인지 알아보고 싶다. 공부한 몇 .. 2022. 7. 2. [React] useNavigate()로 state 전달하기 firebase를 이용해 로그인 페이지를 만들어서 로그인했을 때 사용자 정보를 메인페이지로 전달할 때 유용하게 사용했다. useNavigate()를 통해 페이지 이동하면서 state 값을 전달하고, useLocation()을 통해 데이터를 전달 받았다. login.jsx 데이터를 전달할 페이지 import { useNavigate } from "react-router-dom"; . . . const navigate = useNavigate(); const goToHome = (userId, displayName, photoURL) => { navigate("/", { state: { id: userId, name: displayName, profileImg: photoURL, }, }); }; 로그인이 .. 2022. 5. 27. nvm으로 node.js 버전 변경하기 / 윈도우 firebase를 사용하려고 설치 후 프로젝트에 추가하려는데 에러가 났다. 로그를 읽어보니 node 버전 변경이 필요한 것 같았다. 터미널에 node -v 를 입력해서 설치된 버전을 확인했다. 내 버전은 16.6.2 node -v node.js 버전 변경을 위해 nvm을 설치했다. 1. nvm 설치 2. 버전 리스트 확인 압축을 풀어 설치가 완료된 후 터미널을 다시 실행하여 nvm 설치 확인한다. 다음 명령어를 입력하면 설치할 수 있는 버전 리스트를 확인할 수 있다. nvm list available 3. 원하는 버전 설치 버전 리스트 확인 후 원하는 버전을 설치한다. 나는 firebase 추가하면서 난 에러에서 원하는 대로 17.0.0을 설치했다. nvm install 설치를 원하는 버전 4. 버전 변.. 2022. 5. 11. [React] 깃허브 배포 Build, Deploy 우선 깃허브에 배포하기 위해서는 리퍼지토리를 생성하고 코드를 업로드해두어야 한다. gh-pages 설치 결과물을 github pages에 업로드할 수 있게 해주는 나이스 한 패키지 npm i gh-pages // gh-pages 설치 package.json 파일에 다음을 추가한다. "homepage": "https://깃허브유저네임.github.io/코드가 들어있는 리퍼지토리 이름" build, deploy 그리고 scripts에 deploy, predeploy를 추가한다. "deploy": "gh-pages -d build", "predeploy": "npm run build" deploy가 하는 일은 방금 설치한 gh-pages를 실행시키고 프로젝트 경로에 생성된 "build"라는 디렉터리를 가져가는.. 2022. 5. 10. [React] Router 라우팅이란? "사용자가 url 링크를 요청했을 때 어떤 특정한 페이지로 연결할 건지 결정하는 것" 영화 정보들을 불러올 홈, 그리고 상세정보 페이지로 넘어가는 상세페이지 두 가지로 해보았다. 강의에서 보여준 영화 API가 안 돼서 찾다가 유튜브 API를 사용했다. React Router 설치 npm install react-router-dom // or yarn add react-router-dom 홈 페이지에서 movie 컴포넌트를, /detail 페이지에서 Detail 컴포넌트를 보여줄 것이다. routes 폴더를 만들어 페이지별로 보여줄 컴포넌트들을 모아뒀다. App.js import { BrowserRouter as Router, Routes, Route } from "react-router-do.. 2022. 5. 9. [React] useEffect state가 변경되면 컴포넌트가 다시 렌더링 되면서 원하지 않는 부분도 다시 렌더링 된다. 그것을 막기 위해서 useEffect를 사용할 수 있다. useEffect 함수는 우리 코드가 딱 한 번 실행될 수 있도록, 혹은 특정 시기에만 실행될 수 있도록 보호해준다. "렌더링 될 때마다 실행되는 것을 방지하고 원하는 경우에만 함수를 실행시키기 위함" 한 번만 실행하기 두 개의 argument를 가지는 함수다. 첫 번째 argument는 우리가 딱 한 번만 실행하고 싶은 코드 두 번째는 [] 배열을 넣어줌 const iRunOnlyOnce = () => { console.log("I run only once"); }; useEffect(iRunOnlyOnce,[]); 또는 useEffect(() => { c.. 2022. 5. 8. 이전 1 2 다음 728x90
