개발브롞으

이번 글은 as prop에 대한 글이다. [ as prop ]as prop : styled-components의 스타일을 유지하면서, HTML 태그만 바꾸고 싶을 때 사용하는 기능ex. → 버튼 모양의 링크 → 버튼 스타일의 input 아래 코드 형태로 만들어진 태그를 버튼처럼 생긴 링크 버튼을 만들어 모양은 버튼이지만 동작은 태그처럼 해야할 때 as prop이 사용된다.const Button = styled.button` background: #5c6bc0; color: white; padding: 10px 20px; border: none; border-radius: 4px;`; 그럴 경우 아래 코드와 같이 작성해주면 겉모양은 버튼의 css가 유지된 채 실제 태그는 로 변함 Lin..

이번 글은 글로벌 스타일 컴포넌트를 사용하는 방법에 대한 글이다. 글로벌 스타일 컴포넌트 : 모든 컴포넌트에 적용하고 싶은 코드가 생기는 경우 사용 createGlobalStyle : 모든 컴포넌트에 공통으로 적용되는 스타일”을 한 번에 정의하는 기능의 스타일 컴포넌트=> 한번만 렌더링되어도 전체 앱에 적용됨 (하위 컴포넌트들에도 적용)import { createGlobalStyle } from 'styled-components';const GlobalStyle = createGlobalStyle` * { box-sizing: border-box; } body { font-family: 'Noto Sans KR', sans-serif; }`;function App() { return ..

이번 글은 title을 변경해주는 방법에 대한 글이다. [ react-helmet 라이브러리 ]=> Helmet 이라는 컴포넌트로 감싸줌=> 안에다가 태그를 배치=> 이 컴포넌트가 렌더링 될 때 HTML의 태그를 덮어씀(head 태그를 덮어쓴다고 해서 헬맷임ㅋㅋ)import { Helmet } from 'react-helmet';import Button from '../components/Button';import Container from '../components/Container';import Lined from '../components/Lined';import styles from './HomePage.module.css';import landingImg from '../assets/land..

이번 글은 useSearchParams에 대한 글이다. [ useSearchParams ]useSearchParams()는 searchParams와 setter 함수를 배열로 리턴함(useState 같이)=> 이때, 쿼리 값은 SearchParams의 get 함수로 가져옴 * 쿼리값이란?https://myblog.com/posts?filter=javascript&person=two 라는 url에서 person이 쿼리 이름(Key), two가 쿼리 값(Value)import { useSearchParams } from 'react-router-dom';function PostListPage() { const [searchParams, setSearchParams] = useSearchParams(); ..

이번 글은 리다이렉트에 대한 글이다. [ 리다이렉트 ]조건에 따라 사용자를 다른 경로로 자동 이동시키는 것=> Navigate 컴포넌트를 사용해 구현 - 예시 상황=> 로그인 안한 사용자가 로그인이 필요한 페이지에 접근할 때=> 회원가입 후 자동으로 메인 페이지로 이동시킬 때 [ 활용 예시 ]import { Navigate } from "react-router-dom"; => 해당 경로가 아니면 to에 입력한 주소로 이동하도록 설정if (!course) { return ; }

이번 글은 하위 페이지 나누는 법에 대한 글이다. [ 하위 페이지 나누기 ] - 수정 전} />} /> - 수정 후=> Route로 한번 더 묶어 내부에 공통으로 들어가는 path 부분을 작성해줌* index : 부모 주소가 바로 들어갔을 때 보여줄 기본 화면 (기본 진입 페이지에만 Route 작성) ex. : /courses : /courses/react-frontend-development } /> } /> [ Outlet ]Route를 중첩해서 만들 때 특정 path 안에서는 공통된 디자인을 보여주고 싶음=> Header랑 Footer는 항상 보여주고 Outlet 안에는 “현재 페이지(Route)”가 바뀌면서 들어옴function App() { return ( ..

이번 글은 Link에 스타일을 적용할 수 있는 NavLink에 대한 글이다. [ NavLink ]메뉴에서 사용하는 링크=> Link처럼 사용 가능하지만 style 함수를 지정해줄 수 있음import { NavLink } from "react-router-dom"; [ 사용 방식 ] => getLinkStyle함수를 넣어줌카탈로그 => 현재 페이지의 경로가 이 내비게이션의 링크에 해당되면 isActive가 참이 됨(isActive의 값이 참이면 밑줄, 아니면 밑줄 없음)function getLinkStyle({ isActive }) { return { textDecoration: isActive ? "underline" : "", };}

이번 글은 Router, Routes, Route, Link에 대한 글이다. - 사용 전 설치하기npm install react-router-dom@6 [ Router ]전체 라우팅 시스템 관리 : 앱 전체를 감싸서 이 앱은 페이지 이동 기능을 사용한다고 선언함=> 어떤 URL일 때 어떤 화면을 보여줄까?를 정하는 역할 (전체 길(페이지 이동 규칙)”을 관리하는 본부) ... => Router의 실행과정Router가 감싸고 있는 Routes 내 Route의 path와 element가 일치하는지 확인하고 일치하면 해당 element에 지정된 컴포넌트를 렌더링해줌 * 라우팅 시스템 : 길 안내 시스템=> 웹사이트 내에서 어떤 주소(url)로 가면 어떤 화면(컴포넌트)을 보여줄 지 정해주는 규칙의 집합주소..