React [클론코딩 학습일지] (20) 썸네일형 리스트형 4-2. React에서 Axios 사용하기 Axios 추가 yarn add axios Axios의 장점 Axios의 인스턴스를 생성 할 수 있다! baseUrl, headers, timeout 등을 axios의 instance로 생성하여 여러곳에서 반복해서 작성할 필요가 없다! instance에 작성할 수 있는 항목은 axios깃헙을 참고하면 된다! 그럼 앞서 알아본 the movie db api를 사용하기 위한 instance를 생성해보자! (api.js 를 생성해 따로 작성하였다) import axios from "axios"; const api = axios.create({ baseURL: "https://api.themoviedb.org/3/", params: api_key: "${api_key}", // 각자 발급받은 api key값을 .. 4-1. The Movie DB API The Movie DB API 사용하기 Nomflix 앱을 만들기 위한 데이터는 어떻게 가져올 수 있을까?! TMDB 가 우리가 필요로 하는 데이터를 제공해준다! https://www.themoviedb.org/?language=ko The Movie Database (TMDb) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 회원가입 후 로그인하고 나면 "설정" 메뉴로 이동할 수 있다 [설정]의 API 메뉴로 이동해 API 키를 발급받아야 한다 click here → Developer 선택! 약관 동의 후 어플리케이션 개요를 너무 짧게 입력하니 유효성에서 걸린다. 그래서 넷플릭스 같은.. 3-6. 현재 위치에 특정 스타일 넣기 (withRouter 사용하기) 현재 위치에 특정 스타일 넣기 - withRouter 사용하기 Header의 메뉴 중 현재 선택된 메뉴에만 다른 css를 적용하고 싶다! react-router-dom 의 withRouter를 활용해보자! withRouter는 컴포넌트를 감싸는 형태로 사용하고, Router에 대한 정보를 감싼 컴포넌트에 전달해준다! 기존의 작성했던 Header 컴포넌트에 withRouter를 적용한 모습이다! export default withRouter((props) => ( {...생략} )); withRouter로 전달받을 수 있는 props를 확인하고 활용하기 위해 Header 컴포넌트 내에서 console.log(props)를 통해 withRouter의 props를 출력해보면 아래 이미지와 같다 Header 컴.. 3-5. Styled-components에 Props 활용하기 Styled-components에 Props 활용하기 styled-components를 이용해 css를 지정하고자 할때 props를 활용해야 할 때가 있다! styled-componets로 작성된 컴포넌트들로 구성된 아래와 같은 컴포넌트가 있다 export default() => ( Item1 Item2 Item3 Item4 ); 만약 Item 들에 각각 다른 background-color를 적용하고 싶다면? 어떻게 해야할까!!? 적용하고 싶은 background-color 를 Item에 props로 전달, styled-components로 선언한 Item에서 이 props를 받아주면 된다! const Item = styled.li` (...생략) border-color: ${props => props... 3-4. Global Styles In React React에서 Global Style 적용하기 global style 이 필요한 이유는? 전체 사이트 혹은 프로젝트에 공통적으로 적용할 css가 있을때! (ex: 폰트, 브랜드 컬러 등) global style을 적용하기 위해 설치해야 할 것이 있다. yarn add styled-reset npm install styled-reset 설치 완료! 위 이미지와 같이 GlobalStyles.js 를 만들어주고 global style 지정을 위해 아래 두 가지 import ! import { createGlobalStyle } from "styled-components"; import reset from "styled-reset"; global style은 아래와 같이 방금 import 한 createGlob.. 3-3. CSS in React Reactjs에서 CSS를 활용하는 3가지 방법 - 3. styled-components styled-components 는 JS 와 CSS가 분리된 것을 보완하는 가장 널리 쓰이는 방법! 별도 설치가 필요하다 yarn add styled-components npm install styled-components 설치 완료~! styled-components를 사용할 컴포넌트 내에서 import 해 사용한다 import styled from "styld-components"; 이전 포스팅과 동일하게 Header의 ul태그에 스타일을 주고 싶다면! const List = styled.ul` display: flex; &:hover { background-color: blue; } `; 위와 같이 사용할 수 .. 3-2. CSS in React Reactjs에서 CSS를 활용하는 3가지 방법 - 2. css 모듈 이용하기 css module을 이용하면 className 을 임의화하여 css가 global이 아닌 local이 되도록 함! 1. css 파일을 module.css로 바꿔주기 (CRA를 통해 만든 프로젝트이기때문에 가능) 2. css 파일에 className 넣어주기 /* Header.module.css */ .navList { display: flex; } .navList:hover { background-color: blue; } 3. import 방식을 변경해주기 like javascript (꼭 styles라고 할 필요 없음. 사용하려는 변수 넣어주면 됨) // 기존 import 'Header.css'; //변경 import s.. 3-1. CSS in React Reactjs에서 CSS를 활용하는 3가지 방법 - 1. css 파일 import 하기 .css 작성법은 react 라고 해서 특별할 것이 없다. ${적용할 범위} { css 속성: 값 } 작성한 css 파일을 App.js에서 import 해준다. import '../style.css' // 각자 경로에 맞춰 class App extends Component { ... } export default App css 파일 작성법은 동일하지만 react 에서 class 를 사용하고 싶으면 className이라 써야한다. css파일을 사용할 경우 단점은 컴포넌트와 css가 분리되어 있다는 것. React 의 장점인 컴포넌트의 캡슐화, 모듈화에 반한다. 전체 어플리케이션에서 하나의 컴포넌트를 가져오면 그 안에 j.. 이전 1 2 3 다음
