🌟 React_styled-components
css-in-js
css in js 스타일로 원하는 영역에만 스타일을 적용시킬 수 있다.
☘️ 사용방법
- Yarn add styled components
- GlobalStyle or styled from styled-components
☘️ 장점
css-in-js를 사용함으로써 style을 적용할 때 조건문, 변수 등 다양한 로직을 이용할 수 있다.
🌼 GlobalStyle (전역스타일 적용법)
☘️ 전역 스타일링이란?
프로젝트를 아우르며 공통적으로 들어가야 할 스타일, 전역적으로 스타일을 지정한다.
☘️ 사용법
- import {createGlobalStyle} from "styled-components";
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
body{
font-family: "Helvetica";
line-height: 1.5;
}
`;
export default GlobalStyle;🌼 Styled components(조건부 스타일링)
☘️ 조건부 스타일링이란?
☘️ 사용방법
- yarn add styled components로 설치
- 사용하고자 하는 곳에서 import styled from "styled-components";
- 아래 상수로 스타일을 적어줌 베틱으로
import React from "react";
import styled from "styled-components";
const Box = styled.div`
width: 200px;
height: 200px;
margin: 0 auto;
border: 1px solid ${(props) => props.borderColor}}
`;
const BoxColorList = ["red", "green", "blue"];
const handleColor = () => {
switch (color) {
case "red":
return "red Box";
case "green":
return "green Box";
case "blue":
return "blue Box";
default:
return "black Box";
}
};
const BoxColor = () => {
return (
<div>
{BoxColorList.map((color) => {
<Box key={color} border={borderColor}>
handleColor{color}
</Box>;
})}
</div>
);
};
export default BoxColor;- map()은 key값을 적어주어야 함
🌟 CSS reset
브라우저에서 기본적으로 제공하는 default style을 초기화 시키는 것
다양한 웹 브라우저마다 각각의 다른 default style을 제공하기 때문에 초기화하고 정한대로 표현하는 것이 중요하다.
☘️ css초기화 방법
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}🌟 useState 사용방법의 차이점(배치업데이트)
- 직접적으로 넣는 것
setCount(count + 1)
setCount를 한번에 실행하기 때문에 동일한 실행으로 인식하고 1번만 실행하게 된다. - 함수형으로 넣는 것
다음 setCount에서 인자로 가지고 와서 연속해서 처리하게 된다.
🌟 useEffect
- 의존성 배열 : 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행
- 컴포넌트가 렌더링된 이후마다 특정작업을 수행하게 하는 Hook
- useEffect(()=>{수행할 작업}, [의존성배열])
state가 변경되면 리렌더링이 되는데 렌더링이 될 때마다 useEffect가 활성화된다.
🌟 clean up함수
- 리소스를 정리하거나 불필요한 누수를 정리하기 위해서 사용
useEffect(()=>{
// clean up 함수
return() =>{
console.log("cleanUp");};},[]);
🌟 컴포넌트 라이프사이클
리액트 컴포넌트도 태어나고, 살아가고 죽는 생애주기가 존재했다. 클래스형 컴포넌트를 주로 사용했던 이전 버전에서는 생애 주기와 관련된 여러 메서드가 존재했지만 현재처럼 함수형 컴포넌트를 사용할 때는 useEffect를 주로 사용한다.
componentDidMount -> useEffect(()=>{},[])
componentDidUpdate -> useEffect(()=>{},[value])
componentWillUnmount -> useEffect(()=>{return()=>{}} (cleanUp함수)
🌟useRef
- 특정 값을 저장하기 위해 쓰는 훅
- 💥 렌더링과 상관없다는 것이 가장 중요! (useState와의 차이점)
객체를 반환- 컴포넌트가 계속해서 변경돼도 값을 유지한다.
- 값 안에 current가 항상 존재한다.
ex)예제 (ref영역의 button을 누르더라도 값이 변경되지 않지만 state영역의 button을 누르는 순간 누적되었던 값이 한번에 나타난다.
import React from "react"; import { useRef } from "react"; const App = () => { const [count, setCount] = useState(0); const countRef = useRef(0); const plusStateCountButtonHandler = () => { setCount(count + 1); }; const plusRefCountButtonHandler = () => { countRef.current++; }; return ( <div> <h1>useRef</h1> <div> state영역입니다. {count} <br /> <button onClick={plusStateCountButtonHandler}>state증가</button> </div> <div> ref영역입니다.{countRef.current} <br /> <button onClick={plusRefCountButtonHandler}>ref증가</button> </div> </div> )}; export default App;
예제2
import React from "react";
import { useEffect } from "react";
import { useRef } from "react";
const App = () => {
const idRef = useRef("");
//최초 렌더링 시에만 id부분이 포커싱 되도록
useEffect(() => {
idRef.current.focus();
}, []);
return (
<div>
<div>
아이디:
<input type="text" ref={idRef} />
</div>
<div>
비번 : <input type="text" />
</div>
</div>
);
};
export default App;
🌟 useContext
useContext는 단방향이 아닌 값의 전달, 전역상태를 다루게 된다.
아래의 문제점들을 해결하기 위해 나타난 react context API가 useContext이다.context API필수개념
- createContext : context를 생성한다.
- usecontext : context를 구독하고 해당 context의 현재 값을 읽는다.
- Provider : context를 하위 컴포넌트에게 전달한다.
react context의 필요성
: props를 너무 깊게 사용하다보면 prop drilling현상이 일어난다.
prop drilling의 문제점
- 깊이가 너무 깊어지면 prop이 어떤 componenent에서 왔는지 파악이 어려워진다.
- 오류가 발생할 경우 추적이 힘들어져 대처가 늦어진다.
context API
: 특정 맥락 안에서 state를 공유한다.
어디서든지 값을 접근할 수 있고 업데이트 할 수 있다.나의 이해법
: Grandfather.jsx, Father.jsx, Child.jsx가 있다.
Grandfather은 Father에게 houseName과 money를 Father는 Child에게 다시 houseName과 money를 props drilling을 통해 주게 된다. Grandfather가 Child에게 한번에 houseName과 money를 줘도 되는데 Father에게 불필요하게 props drilling을 이용해 상속해줘야하는 것이다. 이것을 리팩토링 하기위해 useContext를 쓰는 것이다.
✨ useContext의 사용법
- src폴더에서 context폴더를 만든다.
- js파일을 만든다.
- js파일에 createContext를 해준다. & 최상위에 감싸준다.(.Provider
import { createContext } from "react";
export const FamilyContext = createContext(null); // 초기값
- 최상위 폴더나 상속을 주고자 하는 부모파일에서
import React from "react";
import Father from "./Father";
import { FamilyContext } from "./context/FamilyContext";
const Grandfather = () => {
const houseName = "스파르타";
const pocketMoney = 10000;
return (
<div>
<FamilyContext.Provider value={{ houseName, pocketMoney }}>
<Father houseName={houseName} pocketMoney={pocketMoney} />
</FamilyContext.Provider>
</div>
);
};
export default Grandfather;
- Child 컴포넌트에서 useContext()로 값을 꺼내와서 사용해준다.
import React from "react";
import { FamilyContext } from "./context/FamilyContext";
const Child = () => {
const stressWord = {
color: "red",
fontWeight: "600",
};
const { houseName, pocketMoney } = useContext(FamilyContext);
return (
<div>
나는 이 집안의 막내 <br />
할아버지가 우리 집 이름은 <span style={stressWord}>{houseName}</span>라고
하셨습니다. 용돈도 <span style={stressWord}>{pocketMoney}</span>만큼
주셨어요
</div>
);
};
export default Child;
💥 context API를 사용할 때 문제점(주의할 점!)
Provider에서 사용하고 있는 value가 달라지게 된다면 useContext를 사용하고 있는 모든 하위 컴포넌트에서 리렌더링이 일어나게 된다
so