widget

설치하기

npm install styled-components
 

설치 후에 불러오기

import styled from 'styled-components'
 

컴포넌트 생성하기

태그드 템플릿 리터럴을 사용하여 CSS 속성이 적용된 리액트 컴포넌트를 만들어 준다.

const Component = styled.태그`
    CSS속성
    ex) padding: 2px;
`
 

태그드 템플릿 리터럴?

문자열 리터럴(템플릿 리터럴)을 특정 함수로 전달하여 문자열을 처리하거나 변환하는 기능

 

템플릿 리터럴?

리터럴을 템플릿 형태로 사용하는 자바스크립트의 문법으로,

`(backticks)을 사용하여 문자열을 작성하는데 여기선 CSS 속성이 들어간다.

 

예시)

 

생성한 컴포넌트 재사용하기

const Component = styled.(기존Styled-Components)`
    CSS속성
`
 

위에서 만든 BlueButton을 재사용해만든 BigBlueButton

 

 

클래스명을 지정하지 않아도 되는 이유

 

- Styled-Components는 각 컴포넌트에 대해 유일한 클래스명을 생성한다.

=> 자신만의 스타일을 가지고 있어 다른 요소와 충돌하지 않는다.

 

- JavaScript의 템플릿 리터럴을 사용하여 CSS를 작성하는 방식으로

  CSS와 JS가 결합되어 컴포넌트 단위로 스타일을 관리할 수 있다.

 

 

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

Tailwind CSS 설치&기본 세팅  (0) 2024.08.07
Styled-Components  (0) 2024.08.06
SCSS의 중첩 규칙 이해 및 활용  (0) 2024.08.05
SCSS의 변수 사용법  (0) 2024.08.05
함수형 컴포넌트 생명주기  (0) 2024.07.31
widget

 

 
• 기본 중첩 규칙 예시
• 복잡한 CSS 구조에서 중첩을 통한 코드 간결화 예시
• 중첩 사용 시 발생하는 장단점

 

 

기본 중첩 규칙 예시

중첩 사용 시 코드를 구조화하고 관리하기 쉽게 만들어준다.

부모 선택자를 참조하는 &기호

 

위의 예시에서 &:hover

=> li를 hover 한다는 것이다.

 

 

복잡한 CSS 구조에서 중첩을 통한 코드 간결화 예시

 

CSS를 구조화하고 의미론적으로 표현할 수 있게 해주며,

가독성과 유지 보수성을 크게 향상시킨다.

왼 : CSS / 오 : SCSS

중첩 사용 시 발생하는 장단점

 

장점

- 코드의 재사용성이 좋다.

- 코드의 가독성이 좋다.

- 유지 보수가 더 쉬워진다

 

단점

- SCSS 코드를 CSS로 변환하는 과정이 필요해서 조금 더 느리다.

 

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

Styled-Components  (0) 2024.08.06
Styled-Components 사용 방법  (0) 2024.08.06
SCSS의 변수 사용법  (0) 2024.08.05
함수형 컴포넌트 생명주기  (0) 2024.07.31
클래스형 컴포넌트 생명주기  (0) 2024.07.31
widget
• 변수 선언 및 사용 방법
• 다양한 데이터 타입(색상, 숫자, 문자열 등)에 대한 변수 사용 예시

 

 

 

변수 선언하기

$ 기호를 사용하여 변수를 정의한다

$변수명: 속성값;

 

변수 사용하기

$ 기호를 사용하여 변수를 사용한다.

         

색상 변수 사용 예시

 

숫자 변수 사용 예시

 

문자열 변수 사용 예시

 

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

Styled-Components 사용 방법  (0) 2024.08.06
SCSS의 중첩 규칙 이해 및 활용  (0) 2024.08.05
함수형 컴포넌트 생명주기  (0) 2024.07.31
클래스형 컴포넌트 생명주기  (0) 2024.07.31
동물 정보 사이트 기술 블로그 작성하기 2  (0) 2024.07.31
widget
• useEffect의 배열 형태에 따른 실행 시점 차이
• 마운트, 언마운트, 리렌더링, 특정 상태 값 변화
• 의존성 배열이란?

 

함수형 컴포넌트란?

  • state, lifeCycle 관련 기능 사용 불가능하다.

       => Hook을 통해 해결, 사용 가능

 

  • 메모리 자원을 덜 사용한다.
  • 컴포넌트 선언이 편하다.

 

 

출처: 오즈코딩스쿨 리액트 강의

 

 

useEffect()

리액트 컴포넌트가 렌더링 될 때마다 특정 기능을 수행하기 위한 리액트 훅으로,

의존성 배열의 값이 하나라도 변경될 때만 실행이 된다.

 

클래스 컴포넌트의 생명주기 함수인

componentDidMount(), componentDidUpdate(),componentWillUnMount()와 동일한 기능을 하나로 통합한다.

=> useEffect() 훅으로 생명주기 함수와 동일한 기능 수행 가능

 

useEffect(이펙트 함수, 의존성 배열);
 

의존성 배열?

이펙트 함수가 의존하고 있는 배열

=> 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행한다.

 

 

1. 컴포넌트가 최초로 렌더링 될 때에만 조작

 

mount 시 단 한 번만 실행시키고 싶을 때 의존성 배열에 [](빈 배열)을 넣는다.

function Counter() {
  const [counter, setCounter] = useState(1);
  const [counter2, setCounter2] = useState(100);

  useEffect(() => {
    console.log("맨 처음 렌더링 될 때")
  }, [])
 

2. 컴포넌트가 리렌더링 될 때 조작

 

컴포넌트가 업데이트될 때마다 실행시키고 싶을 때 의존성 배열을 생략한다.

function Counter() {
  const [counter, setCounter] = useState(1);
  const [counter2, setCounter2] = useState(100);

  useEffect(() => {
    console.log("리렌더링..!")
  })
 

3. 특정 상태 값이 변할 때만 조작

 

특정 값을 넣으면 특정 상태 값이 변할 때만 실행된다.

아래 예시에선 counter 값일 변할 때, counter 2 값이 변할 때 각각 실행되는 중이다.

function Counter() {
  const [counter, setCounter] = useState(1);
  const [counter2, setCounter2] = useState(100);

  useEffect(() => {
    console.log("counter의 값이 변할 때")
  }, [counter])

  useEffect(() => {
    console.log("counter2의 값이 변할 때")
  }, [counter2])
 

 

4. 컴포넌트가 최종적으로 언마운드 될 때 조작

 

클린업 함수

=> 컴포넌트가 언마운트 될 때 실행

 

useEffect 안에서 return 을 해주고 실행되길 원하는 함수를 넣으면 된다.

아래 예시에선 unmount 될 때, console 값에 "컴포넌트 언마운트"가 뜬다.

function Counter() {
  const [counter, setCounter] = useState(1);
  const [counter2, setCounter2] = useState(100);

  useEffect(() => {
    return () => {
      console.log("컴포넌트 언마운트")
    }
  }, [])
 

 

   요약

  • 의존성 배열에 [](빈 배열)을 넣으면 mount와 unmount 시에 한 번씩만 실행된다
  • 의존성 배열 생략을 하면 컴포넌트가 업데이트될 때마다 실행된다.
  • 의존성 배열에 특정 값을 넣으면 특정 상태 값이 변할 때만 실행된다.




저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

SCSS의 중첩 규칙 이해 및 활용  (0) 2024.08.05
SCSS의 변수 사용법  (0) 2024.08.05
클래스형 컴포넌트 생명주기  (0) 2024.07.31
동물 정보 사이트 기술 블로그 작성하기 2  (0) 2024.07.31
동물 정보 사이트 기술 블로그 작성하기 1  (0) 2024.07.30
widget
• componentDidMount이 실행되는 시점
• componentDidUpdate이 실행되는 시점
• componentWillUnMount이 실행되는 시점
 

 

 

클래스형 컴포넌트란?

  • 모든 클래스형 컴포넌트는 React.Component로 상속을 받아야 한다.

       React.Component or Component 둘 다 가능

 

  • Class 키워드가 들어가야 한다.
  • render() 메서드는 클래스 컴포넌트에서 반드시 구현돼야 하는 유일한 메서드이다.
  • state, lifeCycle 관련 기능 사용이 가능하다.
  • 함수형보다 메모리 자원을 더 많이 사용한다.
  • 임의 메소드를 정의할 수 있다.

 

 

Life Cycle

 

모든 리액트 컴포넌트는 LifeCycle을 갖고 있습니다.

LifeCycle은 Mount (생성) → Update (업데이트) → UnMount (제거) 세 가지 생명주기로 나뉩니다.

출처: 오즈코딩스쿨 리액트 강의

componentDidMount()

컴포넌트가 마운트 된 직후 실행이 되는 메소드로,

실행 시점은 컴포넌트가 화면에 나타나 있는 상태이다.

 

componentDidUpdate()

컴포넌트가 업데이트되고 나서,

화면에 변경사항이 반영되고 나면 실행이 되는 메소드이다.

 

componentWillUnmount()

모든 정리 작업을 수행하는 메소드로,

컴포넌트가 마운트 해제되어 화면에 제거되기 직전 실행이 된다.

 

 

++ Mount란?

컴포넌트가 DOM에 추가되는 동작

 

++ Unmount란?

컴포넌트가 DOM에서 제거되는 동작

 

 

 

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

SCSS의 변수 사용법  (0) 2024.08.05
함수형 컴포넌트 생명주기  (0) 2024.07.31
동물 정보 사이트 기술 블로그 작성하기 2  (0) 2024.07.31
동물 정보 사이트 기술 블로그 작성하기 1  (0) 2024.07.30
Props  (0) 2024.07.24
widget
• 상세 페이지로 이동 시 특정 id 값에 대한 데이터를 받아오는 방법
(useParams의 개념을 포함하여 작성해 주세요.)

 

상세페이지 특정 id 값에 대한 데이터 받아오기

 

 

상세페이지의 route

<Route path="/detail/:id" element={<Detail />}></Route>
 

 

detail.jsx

 

react-router-dom에서 useParams 훅을 불러오고,

../assets/data/data 경로(data.js)에서 data를 불러온다.

 

params?

url의 경로를 동적으로 조작

 

useParams()라는 React Router 훅을 사용하여

현재 페이지의 동적 url 파라미터 값을 추출하여

params 객체로 반환한다.

=> /detail/1이라는 url을 { id: "1" } params 객체로 반환

 

 

animalData는

data 배열에서 id가 현재 url 파라미터의 id와 일치하는 항목을 반환시킨다.

=>find는 주어진 조건에 맞는 첫 번째 요소를 반환한다.

 

data에서 받아오는 id는 숫자인데

url로 받아오는 id는 문자열이다.

 

=> params.id를 숫자(Number)로 바꿔준다.

=> Number(params.id)

 

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

함수형 컴포넌트 생명주기  (0) 2024.07.31
클래스형 컴포넌트 생명주기  (0) 2024.07.31
동물 정보 사이트 기술 블로그 작성하기 1  (0) 2024.07.30
Props  (0) 2024.07.24
구조분해할당  (0) 2024.07.24
widget

 

• React Router를 사용한 페이지 별 라우팅 과정 (BrouserRouter, Routes, Route, Link 역할)
• data.js 파일 내 데이터를 메인 페이지에 렌더링하는 방법
• 동물 카드 클릭 시 상세 페이지로 경로 이동 설정
(동물 id 값에 따른 경로 설정 방법)

 

페이지 별 라우팅 과정

 

React Router 설치방법

 

router를 사용하기 위해서는 react-router-dom 라이브러리를 설치해야 한다.

npm i react-router-dom
 

 

main.jsx

위에서 설치한 react-router-dom에서 BrowserRouter를 불러온다.

 

<BrowserRouter>는 최상단 컴포넌트에 감싸줘야 하는 태그이며

현재 App.jsx 속 <App>컴포넌트를 <BrowerRouter>로 감싼 상태이다.

 

 

각 페이지를 담당할 jsx 생성

 

src 폴더 내 page 폴더를 추가하여

각 페이지를 담당할 파일을 생성해 준다.

 

Detail.jsx

Main.jsx

Search.jsx

 

 

 

 

 

 

 

App.jsx

<Route> 컴포넌트를 사용하기 위해서는 <Routes> 컴포넌트로 감싸줘야 한다.

<Route> 컴포넌트 내 path는 해당 주소값, element는 호출될 컴포넌트를 입력해 준다.

 

 

Link

클릭할 시 해당 주소로 페이지를 이동하는 태그

<Link to="/주소값"></Link>
 

a 태그를 사용했다면?

페이지를 전환시키면 페이지를 새로 불러오기 때문에 상태가 초기화된다.

=> 렌더링 된 컴포넌트를 모두 새로 렌더링 해야 한다.

=> 새로고침 되는 것

 

a 태그와 Link 태그의 차이점은?

  • a 태그 : 페이지를 전환될 때 페이지를 새로고침한다.
  • Link 태그 : 페이지의 주소만을 변경해 페이지를 새로고침하지 않는다.

 

결론 : Link 태그 사용하기

 

 

Link 컴포넌트 활용 예시 -동물 정보 사이트

 

Main.jsx

각 요소의 이미지의 링크와 이름을 <Link> 컴포넌트로 감싸

to 속성을 사용해 /detail/${el.id}라는 주소로 이동을 시키는 데

여기서 ${ el.id }는 각 요소의 고유한 id이다.

Search.jsx

 

 

data.js 파일 내 데이터를 메인 페이지에 렌더링 하는 방법

 

data.js 파일에는 대략적으로 아래 배열이 있다.

 

Main.jsx

대표사진 삭제

사진 설명을 입력하세요.

../assets/data/data 경로(data.js)에서 data를 불러온다.

=> data.js에서 불러오는 것

 

Main 컴포넌트

data 배열의 각 요소를 map을 사용하여 <li> 요소로 변환하여 데이터 렌더링을 한다.

각 <li>요소는 각 동물의 이미지 링크와 이름을 포함하고 있는 <Link>컴포넌트를 감싸고 있으며,

각 항목 클릭 시 해당 주소로 이동하는 /detail/${el.id} 주소값이 있다.

=> 각 동물 id 값에 따른 경로

 

${ el.id }는 각 요소

=> 각 동물의 고유한 id이다.

 

 

 

저작자표시 비영리 변경금지

'코딩 공부 (frontend) > react' 카테고리의 다른 글

함수형 컴포넌트 생명주기  (0) 2024.07.31
클래스형 컴포넌트 생명주기  (0) 2024.07.31
동물 정보 사이트 기술 블로그 작성하기 2  (0) 2024.07.31
Props  (0) 2024.07.24
구조분해할당  (0) 2024.07.24

+ Recent posts

티스토리툴바