React숙련 Styled Components, React Hooks
1. Styled Components
1. styled-components란?
리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지
2. styled-components 준비하기
vscode-styled-components를 설치 후 vscode 터미널에서 yarn add styled-components 명령을 입력해 패키지를 설치함.
3. styled-components 사용하기
-기본적인 사용법
// src/App.js
import React from "react";
// styled-components에서 styled 라는 키워드를 import.
import styled from "styled-components";
// styled키워드를 사용해서 styled-components 방식대로 컴포넌트를 만듦.
const StBox = styled.div`
// 이 안에 스타일 코드를 작성. 스타일 코드는 우리가 알고 있는 css와 동일.
width: 100px;
height: 100px;
border: 1px solid red;
margin: 20px;
`;
const App = () => {
// 그리고 우리가 만든 styled-components를 JSX에서 html 태그를 사용하듯이 사용.
return <StBox>박스</StBox>;
};
export default App;-조건부 스타일링
// src/App.js
import React from "react";
import styled from "styled-components";
// 1. styled-components를 만듦
const StBox = styled.div`
width: 100px;
height: 100px;
border: 1px solid ${(props) => props.borderColor}; // 4.부모 컴포넌트에서 보낸 props를 받아 사용.
margin: 20px;
`;
const App = () => {
return (
<div>
{/* 2. 위에서 만든 styled-components를 사용. */}
{/* 3. props를 통해 borderColor라는 값을 전달. */}
<StBox borderColor="red">빨간 박스</StBox>
<StBox borderColor="green">초록 박스</StBox>
<StBox borderColor="blue">파랑 박스</StBox>
</div>
);
};
export default App;-Swtich문과 map을 사용해서 리팩토링
// src/App.js
import React from "react";
import styled from "styled-components";
const StContainer = styled.div`
display: flex;
`;
const StBox = styled.div`
width: 100px;
height: 100px;
border: 1px solid ${(props) => props.borderColor};
margin: 20px;
`;
// 박스의 색을 배열에 담음.
const boxList = ["red", "green", "blue"];
// 색을 넣으면, 이름을 반환해주는 함수를 만듦.
const getBoxName = (color) => {
switch (color) {
case "red":
return "빨간 박스";
case "green":
return "초록 박스";
case "blue":
return "파란 박스";
default:
return "검정 박스";
}
};
const App = () => {
return (
<StContainer>
{/* map을 이용해서 StBox를 반복하여 화면에 그림. */}
{boxList.map((box) => (
<StBox borderColor={box}>{getBoxName(box)}</StBox>
))}
</StContainer>
);
};
export default App;2. React Hooks - useState
1. useState
useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해줌.
const [state, setState] = useState(initialState);2. 함수형 업데이트
setState를 사용하는 방식에는 함수형 업데이트 방식이 있음
// 기존에 우리가 사용하던 방식
setState(number + 1);
// 함수형 업데이트
setState(() => {});setState의 ()안에 수정할 값이 아니라, 함수를 넣을 수 있음. 그리고 그 함수의 인자에서는 현재의 state를 가져올 수 있고 {} 안에서는 이 값을 변경하는 코드를 작성할 수 있음.
// 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것.
setState((currentNumber)=>{ return currentNumber + 1 });=>둘의 차이점은?
일반사용법
// src/App.js
import { useState } from "react";
const App = () => {
const [number, setNumber] = useState(0);
return (
<div>
{/* 버튼을 누르면 1씩 플러스. */}
<div>{number}</div>
<button
onClick={() => {
setNumber(number + 1); // 첫번째 줄
setNumber(number + 1); // 두번쨰 줄
setNumber(number + 1); // 세번째 줄
}}
>
버튼
</button>
</div>
);
}
export default App;함수형 업데이트
// src/App.js
import { useState } from "react";
const App = () => {
const [number, setNumber] = useState(0);
return (
<div>
{/* 버튼을 누르면 3씩 플러스. */}
<div>{number}</div>
<button
onClick={() => {
setNumber((previousState) => previousState + 1);
setNumber((previousState) => previousState + 1);
setNumber((previousState) => previousState + 1);
}}
>
버튼
</button>
</div>
);
}
export default App;- 일반 업데이트 방식은 버튼을 클릭했을 때 첫번째 줄 ~ 세번째 줄의 setNumber가 각각 실행되는 것이 아니라, 배치(batch)로 처리. 즉 onClick을 했을 때 setNumber 라는 명령을 세번 내리지만, 리액트는 그 명령을 하나로 모아 최종적으로 한번만 실행을 시킴. 그래서 setNumber을 3번 명령하던, 100번 명령하던 1번만 실행됨.
반면에 함수형 업데이트 방식은 3번을 동시에 명령을 내리면, 그 명령을 모아 순차적으로 각각 1번씩 실행시킴. 0에 1더하고, 그 다음 1에 1을 더하고, 2에 1을 더해서 3이라는 결과가 나타남.
3. React Hooks - useEffect
1. useEffect
- useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook
- useEffect는 useEffect가 속한 컴포넌트가 화면에 렌더링될 때 실행
import React, { useEffect, useState } from "react";
const App = () => {
const [value, setValue] = useState("");
useEffect(() => {
console.log("hello useEffect");
});
return (
<div>
<input
type="text"
value={value}
onChange={(event) => {
setValue(event.target.value);
}}
/>
</div>
);
}
export default App;=>브라우저 콘솔에 계속 찍힘!
=>전체적인 흐름
1. input에 값을 입력
2. value, 즉 state가 변경
3. state가 변경되었기 때문에 App컴포넌트가 리렌더링 됨
4. 리렌더링이 되었기 때문에 useEffect가 다시 실행
5. 1번->5번 과정이 계속 순환
2. 의존성 배열
- 이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행하도록! (함수의 실행조건 제어가능)
// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
useEffect(()=>{
// 실행하고 싶은 함수
}, [의존성배열])- useEffect에서 함수를 한번만 실행시키고자 할 때는 의존성 배열을 빈 배열로 둠
4. React Hooks - useRef
1. useRef란?
- DOM요소에 접근할 수 있도록 하는 Hook
import "./App.css";
import { useRef } from "react";
function App() {
const ref = useRef("초기값");
console.log("ref", ref);
return (
<div>
<p>useRef에 대한 이야기에요.</p>
</div>
);
}
export default App;=> 설정된 ref값은 컴포넌트가 계속해서 렌더링 되어도 unmount전까지 값을 유지!
=> state와 비슷한 역할을 하지만 state는 변화가 일어나면 다시 렌더링. ref에 저장한 값은 렌더링 XX
2. 예제
- useRef 사용하여 포커싱주기
import { useEffect, useRef } from "react";
import "./App.css";
function App() {
const idRef = useRef("");
// 렌더링이 될 때
useEffect(() => {
idRef.current.focus();
}, []);
return (
<>
<div>
아이디 : <input type="text" ref={idRef} />
</div>
<div>
비밀번호 : <input type="password" />
</div>
</>
);
}
export default App;
5. React Hooks - useContext(Context API)
- react context의 필요성
일반적으로 부모컴포넌트에서 자식컴포넌트로 데이터를 전달해 줄 때 props를 사용했음. 그러나 부모->자식->그 자식->그 자식의 자식 이렇게 깊어지면 prop drilling현상이 일어남.
prop drilling의 문제점은 깊이가 깊어지면 prop이 어떤 컴포넌트로부터 왔는지 파악이 어려워지고 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어 대처가 늦어짐.
=> react context API !!
useContext hook을 통해 쉽게 전역 데이터를 관리할 수 있게 됨!
-> context API 필수 개념
createContext: context생성
Consumer: context변화감지
Provider: context전달(to하위컴포넌트)
6. React Hooks - 최적화 (React.memo, useCallback, useMemo)
- memo(React.memo) : 컴포넌트를 캐싱
- useCallback : 함수를 캐싱
- useMemo : 값을 캐싱
코린이 탈출을 기원하는 코린이