❓컴포넌트 분리 기준?
-
재사용성
-
기능별로 붖ㄴ리
-
관심사 분리
나의 실수😭😭😭
컴포넌트 분리의 각 예시를 보자
✅ 똑같은 혹은 재사용되는 컴포넌트 분리
✅ isDone의 boolean값을 컴포넌트하기
✅ 스타일드 컴포넌트 전역으로 관리하기
✅ 폰트 전역에서 관리하기
✅ 똑같은 혹은 재사용되는 컴포넌트 분리
똑같은 혹은 재사용되는 컴포넌트 분리
1. 넘겨 받을 파일을 만든다.
2. 파일 안에 함수 선언문을 작성한다.
3. 선언문 안의 return ()괄호 안에 분리할 text들을 집어넣는다.
4. 집어 넣은 text들 안에서 사용된 기능들이나 변수들 등등을 props를 통해서 부모컴포넌트에서 보내주고 자식컴포넌트는 구조분해할당을 통해서 받는다.
5. props를 받기 고추장스러우면 기능들 자체를 분리한 컴포넌트의 함수 return문 위에 배치하고 필요한 훅이나 다른 것들은 import해서 받는다.
6. 그 컴포넌트 파일을 export default 컴포넌트명 을 통해 내보낸다
7. 원래 부모컴포넌트에게 import 컴포넌트 명을 통해 받는다.
ex)
import {필요한 훅들}~~
funtion 컴포넌트명 ("props받는 자리") {
" props받기 싫으면 여기에 기능들을 넣는다"
"기능 안 넣으면 props를 부모에서 내려줘야하고 자식에서 구조분해할당으로 받음"
return (
"컴포넌트로 분리시키고싶은 테그들"
)
}
export default 컴포넌트 명 ✅ isDone의 boolean값을 컴포넌트하기
+isDone의 boolean값을 컴포넌트하기
만약 true와 false일경우를 제외하고 나머지 text가 전부 같다면??
1. props를 통해 isDone = {false or true}를 써준다.
2. 자식컴포넌트가 구조분해할당을 통해 isDone을 받는다
3. false 혹은 true 라고 되어있던 if문이나 다른 형식을 isDone으로 바꿔준다. ex)
function Working({ title, isDone }) { ----------->isDone구조분해할당
const movehandler = (id, isDone) => {
dispatch(moveDodone(id, !isDone));
return (
<div>
<StWorkingDone>{title}</StWorkingDone> -----> 내가 넣은 title
<StIngBox>
{data.map((item) => {
if (item.isDone === isDone) { ------->false였던 부분 교체
return (
<StOneButton
onClick={() => {
movehandler(item.id, item.isDone);
}}✅ 스타일드 컴포넌트 전역으로 관리하기
+ 스타일드 컴포넌트 전역으로 관리하기
1. 모든 스타일들을 새 파일 안에 전부 넣는다.
2. 스타일 하나하나에 export를 시켜준다. --> 그럼 어디서든 import하며 쓸 수 있다.
3. 쓰고 싶은 파일에다 필요한 스타일을 import해서 쓰면 끝!✅ 폰트 전역에서 관리하기
리액트 파일에서 index.jsx파일을 들어간다 --> 전역파일 관리
import {createGlobalStyle} from "styled-component"를 추가
const Globalstyle = createGlobalStyle`
"여기에 원하는 폰트를 눈누에서 찾아 복사하여 넣는다"
font-family : "ttt.sf~"
src : url ("주소")
`여기서 font-family부분을 복사해서 원하는 스타일들에다가 붙여넣기해서 쓰면 된다. 그럼 전역관리가 된다!
"열정"