ex) 전체 페이지 중 여러 공간(헤더, 바디, 푸터)으로 나뉘어져 있다면 로그인을 할 때 모든 공간을 하나씩 업데이트 해줘야함 -> context를 사용하면 모든 컴포넌트에 공용적으로 데이터를 사용할 수 있음
createContext()
- 여러 컴포넌트가 함께 사용할 데이터를 저장할 공간 (context)을 만드는 함수
- context가 없다면 부모가 자식에게 계속 props를 전달해야 함
- Provider : 데이터를 넣는 역할, 데이터를 담아서 범위(태그)를 지정해주는 컴포넌트(태그)
- useContext() : 데이터를 꺼낼 때 쓰는 Hook 함수
- ex)
- 전역으로 공유할 Context 만들기(보통 외부 혹은 별도 파일에 설정)
- export const UserContext = createContext(null)
- 데이터를 공유하고 싶은 범위의 최상위 부모 컴포넌트를 Provider을 태그처럼 사용해 감싸기(보통 시작 파일에 설정)
- <UserContext.Provider value={user}> <ChildrenComponent /> </UserContext.Provider>
- 데이터가 필요한 자식 컴포넌트에서는 useContext 훅을 사용해 꺼내 쓰기
- const user = useContext(userContext)
createBrowserRouter()
- URL과 화면 컴포넌트의 연결 규칙을 만드는 함수
- 1. 라우팅 규칙 만듦
const router = createBrowserRouter([
{
path: "/",
element: <Home/>
},
{
path: "/videos",
element: <videos/>
}
])
- 2. 라우팅 규칙을 React 어플리케이션에 적용
<RouterProvider router={router}/>
자동 임포트가 되지 않음 => npm i react-router-dom 설치
- ex)
에서 두 가지 방법으로 경로 들어가기
or
=> 첫 번째 방법 : children 안의 videos(중첩 라우팅)의 경우 Root화면과 Videos 화면이 동시에 보임
=> 두 번째 방법 : 완전히 독립된 videos이기 때문에 Root 화면이 사라지고 Videos 화면만 단독으로 보임
- 첫 번째 방법
=> 웹 사이트를 만들다보면 메인 홈, 비디오 목록 등 주소가 바뀌어도 상단 헤더, 사이드바, 하단 푸터는 그대로 고정되어있는 경우 많이 사용됨
- 두 번째 방법
=> 공통 헤더나 사이드바가 절대로 화면에 나오면 안 되고 화면 전체를 덮어씌워야 하는 특수한 페이지에 사용됨(로그인/회원가입 페이지 등)
CSS Module 방식
- 기존 : 모든 곳에 다 적용되던 일반 CSS
- css Module: 특정 컴포넌트(파일)에만 고립시켜서 적용하는 기술
=> ex) 해당 CSS는 딱 이 JSX 파일 안에서만 작동함
- ex) Home.jsx 파일이 있고 해당 파일에만 CSS를 넣고 싶다면
- 파일명을 만들 때 중간에 .module를 꼭 붙여서 만들어야함 => Home.module.css
- JSX 파일에서 불러올 때 객체 형태로 이름을 지어서 가져옴 => import styles from "./Home.module.css"
- 태그에 지정할 때 그냥 글자 "button"이 아니라 자바스크립트 변수처럼 지정해야 함 => <button className={styles.button}>버튼</button>
React에서 CSS 다루는 방법
- 그동안 사용한 방법은 파일 두개(jsx, css)를 번갈아보며 코딩했지만 이번 방법들은 자바스크립트/HTML 파일 안에서 CSS까지 해결함
styled-components
(스타일드 컴포넌트)
- cmd -> npm i styled-components 설치 후 css 사용
- 개념: 나만의 맞춤형 디자인 태그(컴포넌트)를 만드는 도구
- CSS 코드가 들어간 나만의 새로운 태그를 정의해서 사용함
- ex)
import styled from 'styled-components'
const PinkButton = styled.button`
background-color: deeppink;
color: white;
padding: 10px;
`;
export default function Home() {
return <PinkButton>버튼1</PinkButton>
}
=> 해당 예시처럼 새로운 태그는 일반 태그와 동일한 느낌으로 사용됨
Tailwind CSS
(테일윈드)
- cmd -> npm i tailwindcss @/vite로 설치
- CSS 파일을 아예 만들지 않고 리액트가 미리 약속해 둔 수천 개의 클래스 이름들을 가져다 사용함
- 공식 사이트 : Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
- => 해당 사이트에 약속된 암호들이 적혀있음
- ex)
=> bg-blue-500 : 배경색을 파란색(500 농도)로 칠함
rounded-xl : 테두리를 아주 둥글둥글하게 만듦
px-2 : 좌우(x축) 안쪽 여백(padding)을 2단계만큼 줌