- CSS 코드를 직접 작성하지 않아도 된다.
=> 개발 속도가 빨라진다.
- 체계적이고 일관된 디자인 사용이 가능하다.
- 클래스 이름을 만들 필요가 없다.
- 초기 세팅이 복잡하다.
- 코드가 안 이쁘다.
- CSS 크기가 커질 수 있다.
공식 익스텐션으로 자동완성 등 편리하게 코드를 작성할 수 있다.
이런 식으로 font-를 쳤는데 추천을 해주는데 클릭 시 자동 완성이 된다.
| React 외부 구현 상태관리 (0) | 2024.08.08 |
|---|---|
| React 내부 구현 상태관리 (1) | 2024.08.08 |
| Tailwind CSS 설치&기본 세팅 (0) | 2024.08.07 |
| Styled-Components (0) | 2024.08.06 |
| Styled-Components 사용 방법 (0) | 2024.08.06 |
사용자(개발자)가 앱을 더 빠르고 쉽게 만들 수 있도록 설계된 유틸리티 우선 프레임 워크(CSS 프레임워크)다.
미리 세팅된 유틸리티 클래스를 활용해 HTML 코드 내에서 CSS를 적용시키는 것
사용 언어별 추천 설치 방법이 있다.
아래 공식 사이트 참고.
우리는 vite를 사용하기 때문에 먼저 react를 설치해 주고,
Tailwind CSS를 설치해 준다.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p 설치 후에 세팅이 필요하다.
먼저 tailwind.config.js에서 간단한 설정이 필요하다.
/** @type {import('tailwindcss').Config} */
export default {
content: [],
theme: {
extend: {},
},
plugins: [],
}여기서 content 부분에 이 코드를 넣어주면 된다.
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
그다음에 index.css에서 이 코드를 넣어준다.
@tailwind base;
@tailwind components;
@tailwind utilities;초기 세팅은 끝났다.
이제 Tailwind CSS 공식 문서를 보면서 필요한 Classname을 가져다 사용하면 된다.
| React 내부 구현 상태관리 (1) | 2024.08.08 |
|---|---|
| Tailwind CSS의 장단점&익스텐션 추천 (0) | 2024.08.07 |
| Styled-Components (0) | 2024.08.06 |
| Styled-Components 사용 방법 (0) | 2024.08.06 |
| SCSS의 중첩 규칙 이해 및 활용 (0) | 2024.08.05 |
JavaScript와 CSS를 결합하여 컴포넌트 기반 스타일링 가능
=> CSS-in-JS
컴포넌트를 더 깔끔하고 모듈화된 스타일링 코드로 관리 가능
장점
- CSS도 컴포넌트화 할 수 있다.
- CSS와 JS의 상호작용이 쉽다.
- Class 이름을 자동으로 지어준다.
- SSR을 지원하여 초기 렌더링 성능 개선이 가능하다.
단점
- SCSS 코드를 CSS로 변환하는 과정이 필요해서 조금 더 느리다.
- Clsss 이름이 안 이쁘다.
- JS의 크기가 커진다.
CSS-in-JS?
JavaScript를 사용하여 CSS를 작성하고 관리하는 방법이다.
- 각각의 컴포넌트에 스타일을 지정할 수 있어 CSS 이름 충돌을 방지한다.
- JavaScript의 변수나 조건문 등을 활용하여 스타일을 동적으로 조작이 가능하다.
ex) props
- CSS를 모듈화하고 유연하게 작성할 수 있다.
CDD(Capability-driven development)?
- CDD는 사용자의 요구사항을 충족시키기 위해 기능을 설계하고 개발
=> 기능 중심 개발 & 사용자 경험 중심
- Styled-Components를 통해 개발된 컴포넌트는 각각 독립적으로 스타일 적용
=> 반복적이고 짧은 개발 주기
- 기능을 독립적이고 재사용 가능한 단위로 개발(컴포넌트 단위로 스타일을 정의하고 관리)
=> 모듈화& 재사용성
| Tailwind CSS의 장단점&익스텐션 추천 (0) | 2024.08.07 |
|---|---|
| Tailwind CSS 설치&기본 세팅 (0) | 2024.08.07 |
| Styled-Components 사용 방법 (0) | 2024.08.06 |
| SCSS의 중첩 규칙 이해 및 활용 (0) | 2024.08.05 |
| SCSS의 변수 사용법 (0) | 2024.08.05 |
설치하기
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가 결합되어 컴포넌트 단위로 스타일을 관리할 수 있다.
| 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 |
• 기본 중첩 규칙 예시
• 복잡한 CSS 구조에서 중첩을 통한 코드 간결화 예시
• 중첩 사용 시 발생하는 장단점
중첩 사용 시 코드를 구조화하고 관리하기 쉽게 만들어준다.
부모 선택자를 참조하는 &기호
위의 예시에서 &:hover
=> li를 hover 한다는 것이다.
CSS를 구조화하고 의미론적으로 표현할 수 있게 해주며,
가독성과 유지 보수성을 크게 향상시킨다.
- 코드의 재사용성이 좋다.
- 코드의 가독성이 좋다.
- 유지 보수가 더 쉬워진다
- SCSS 코드를 CSS로 변환하는 과정이 필요해서 조금 더 느리다.
| 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 |
• 변수 선언 및 사용 방법
• 다양한 데이터 타입(색상, 숫자, 문자열 등)에 대한 변수 사용 예시
$ 기호를 사용하여 변수를 정의한다
$변수명: 속성값;
$ 기호를 사용하여 변수를 사용한다.
| Styled-Components 사용 방법 (0) | 2024.08.06 |
|---|---|
| SCSS의 중첩 규칙 이해 및 활용 (0) | 2024.08.05 |
| 함수형 컴포넌트 생명주기 (0) | 2024.07.31 |
| 클래스형 컴포넌트 생명주기 (0) | 2024.07.31 |
| 동물 정보 사이트 기술 블로그 작성하기 2 (0) | 2024.07.31 |
• useEffect의 배열 형태에 따른 실행 시점 차이
• 마운트, 언마운트, 리렌더링, 특정 상태 값 변화
• 의존성 배열이란?
=> Hook을 통해 해결, 사용 가능
리액트 컴포넌트가 렌더링 될 때마다 특정 기능을 수행하기 위한 리액트 훅으로,
의존성 배열의 값이 하나라도 변경될 때만 실행이 된다.
클래스 컴포넌트의 생명주기 함수인
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("컴포넌트 언마운트")
}
}, [])
요약
| SCSS의 중첩 규칙 이해 및 활용 (0) | 2024.08.05 |
|---|---|
| SCSS의 변수 사용법 (0) | 2024.08.05 |
| 클래스형 컴포넌트 생명주기 (0) | 2024.07.31 |
| 동물 정보 사이트 기술 블로그 작성하기 2 (0) | 2024.07.31 |
| 동물 정보 사이트 기술 블로그 작성하기 1 (0) | 2024.07.30 |
• componentDidMount이 실행되는 시점
• componentDidUpdate이 실행되는 시점
• componentWillUnMount이 실행되는 시점
React.Component or Component 둘 다 가능
모든 리액트 컴포넌트는 LifeCycle을 갖고 있습니다.
LifeCycle은 Mount (생성) → Update (업데이트) → UnMount (제거) 세 가지 생명주기로 나뉩니다.
componentDidMount()
컴포넌트가 마운트 된 직후 실행이 되는 메소드로,
실행 시점은 컴포넌트가 화면에 나타나 있는 상태이다.
componentDidUpdate()
컴포넌트가 업데이트되고 나서,
화면에 변경사항이 반영되고 나면 실행이 되는 메소드이다.
componentWillUnmount()
모든 정리 작업을 수행하는 메소드로,
컴포넌트가 마운트 해제되어 화면에 제거되기 직전 실행이 된다.
++ Mount란?
컴포넌트가 DOM에 추가되는 동작
++ Unmount란?
컴포넌트가 DOM에서 제거되는 동작
| SCSS의 변수 사용법 (0) | 2024.08.05 |
|---|---|
| 함수형 컴포넌트 생명주기 (0) | 2024.07.31 |
| 동물 정보 사이트 기술 블로그 작성하기 2 (0) | 2024.07.31 |
| 동물 정보 사이트 기술 블로그 작성하기 1 (0) | 2024.07.30 |
| Props (0) | 2024.07.24 |
• 상세 페이지로 이동 시 특정 id 값에 대한 데이터를 받아오는 방법
(useParams의 개념을 포함하여 작성해 주세요.)
<Route path="/detail/:id" element={<Detail />}></Route>
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)
| 함수형 컴포넌트 생명주기 (0) | 2024.07.31 |
|---|---|
| 클래스형 컴포넌트 생명주기 (0) | 2024.07.31 |
| 동물 정보 사이트 기술 블로그 작성하기 1 (0) | 2024.07.30 |
| Props (0) | 2024.07.24 |
| 구조분해할당 (0) | 2024.07.24 |
• React Router를 사용한 페이지 별 라우팅 과정 (BrouserRouter, Routes, Route, Link 역할)
• data.js 파일 내 데이터를 메인 페이지에 렌더링하는 방법
• 동물 카드 클릭 시 상세 페이지로 경로 이동 설정
(동물 id 값에 따른 경로 설정 방법)
router를 사용하기 위해서는 react-router-dom 라이브러리를 설치해야 한다.
npm i react-router-dom
위에서 설치한 react-router-dom에서 BrowserRouter를 불러온다.
<BrowserRouter>는 최상단 컴포넌트에 감싸줘야 하는 태그이며
현재 App.jsx 속 <App>컴포넌트를 <BrowerRouter>로 감싼 상태이다.
src 폴더 내 page 폴더를 추가하여
각 페이지를 담당할 파일을 생성해 준다.
Detail.jsx
Main.jsx
Search.jsx
<Route> 컴포넌트를 사용하기 위해서는 <Routes> 컴포넌트로 감싸줘야 한다.
<Route> 컴포넌트 내 path는 해당 주소값, element는 호출될 컴포넌트를 입력해 준다.
클릭할 시 해당 주소로 페이지를 이동하는 태그
<Link to="/주소값"></Link>a 태그를 사용했다면?
페이지를 전환시키면 페이지를 새로 불러오기 때문에 상태가 초기화된다.
=> 렌더링 된 컴포넌트를 모두 새로 렌더링 해야 한다.
=> 새로고침 되는 것
a 태그와 Link 태그의 차이점은?
결론 : Link 태그 사용하기
각 요소의 이미지의 링크와 이름을 <Link> 컴포넌트로 감싸
to 속성을 사용해 /detail/${el.id}라는 주소로 이동을 시키는 데
여기서 ${ el.id }는 각 요소의 고유한 id이다.
data.js 파일 내 데이터를 메인 페이지에 렌더링 하는 방법
data.js 파일에는 대략적으로 아래 배열이 있다.
사진 설명을 입력하세요.
../assets/data/data 경로(data.js)에서 data를 불러온다.
=> data.js에서 불러오는 것
data 배열의 각 요소를 map을 사용하여 <li> 요소로 변환하여 데이터 렌더링을 한다.
각 <li>요소는 각 동물의 이미지 링크와 이름을 포함하고 있는 <Link>컴포넌트를 감싸고 있으며,
각 항목 클릭 시 해당 주소로 이동하는 /detail/${el.id} 주소값이 있다.
=> 각 동물 id 값에 따른 경로
${ el.id }는 각 요소
=> 각 동물의 고유한 id이다.
| 함수형 컴포넌트 생명주기 (0) | 2024.07.31 |
|---|---|
| 클래스형 컴포넌트 생명주기 (0) | 2024.07.31 |
| 동물 정보 사이트 기술 블로그 작성하기 2 (0) | 2024.07.31 |
| Props (0) | 2024.07.24 |
| 구조분해할당 (0) | 2024.07.24 |