분류 전체보기 (6) 썸네일형 리스트형 React Hook. useLocation 과 useParams 차이점 알아보기 먼저 useLocation 과 useParams 사용하기 위해서는 라우터 설치가 필수입니다. npm install react-router-dom useLocation() 사용 방법 1) useLocation을 import 합니다 import { useLocation } from 'react-router-dom'; 2) 변수에 useLocation 정보를 담습니다. const location = useLocation(); 3) console.log에서 출력해보고, 원하는 정보를 가져다 사용하면 됩니다. const location = useLocation(); useEffect(() => { console.log(location); }, [ location ]) 그러면 파라미터가 아닌 현재 페이지의 Path.. CSS. object-fit 속성 알아보기 object-fit CSS object-fit 속성은 나 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다. object-position 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있습니다. contain 대체 콘텐츠의 가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로세로비를 유지하게 되므로, 서로의 가로세로비가 일치하지 않으면 객체가 레터박스 처럼 됩니다. cover 대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다. fill 요소 콘텐츠 박스 크기에 맞춰 대.. CSS. flexbox를 이용한 container 배치 화면을 세팅할 때 CSS로 DIV 박스를 마음대로 배치하는 일은 쉬운 일이 아닙니다. 이 경우 flexbox 배치를 통해 배치하면 좀 더 효율적인 배치를 할 수 있습니다. 먼저 flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성되는데 flexbox를 만드는 방법은 간단합니다. 정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언하면 됩니다. .flex_container { display: flex; } display: flex 속성이 적용된 요소는 flex container가 되고, flex container의 자식 요소는 flex item이 됩니다. flex item은 주축(main axis)에 따라 정렬되고, 주축의.. React. && 연산자로 If문 처럼 사용하기 JSX 안에서는 중괄호를 이용하여 표현식을 포함 할 수 있습니다. 그 안에 자바스크립트의 논리 연산자 &&를 사용하면 어렵지 않게 조건식을 사용 할 수 있습니다. { AAA && BBB } # && 뒤의 BBB 조건은 앞의 AAA 조건이 True 일때만 출력됨 # AAA 조건이 false일 경우 React는 이 를 무시함 리액트 프로젝트에 외부 API 적용하기 (TheMOVIE DB API) https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 먼저 위 사이트 회원 가입을 진행합니다. (개인 API키를 받기위해 필수적으로 가입해야 합니다.) 회원 가입 후 로그인후 설정 창으로 이동해 줍니다. 설정창에서 API 탭으로 이동 후 DEVELOP 목적으로 API_KEY를 신청해서 V3 auth키를 사용하시면 됩니다.(전 캡쳐 전에 미리 받은 상태라 패스하였습니다.) import React, { useEffect } from "react"; const MainPage = () => { cons.. CSS / 기초 / !important CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙입니다. property: value !important; 예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만듭니다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 글자색을 빨간색으로 유지합니다. p { color: red !important; } p { color: blue; } 다시 속성값을 재설정하고 싶으면 !important를 다시 붙입니다. 예를 들어 다음은 문단의 글자색을 녹색으로 만듭니다. p.. 이전 1 다음
