23.02.10-23.02.16 주특기 숙련 주차 / React
주요 일정
2월 16일(목) 10시-14시 숙련주차 퀴즈
2월 16일(목) ~21시 개인 숙련주차 과제 제출(todo)
2월 16일(목) ~21시 팀 과제 노션 작성 제출
Styled Components
꾸미고자 하는 컴포넌트를 그대로 작성 후, 스타일 코드를 작성하게 되면 html처럼 사용할 수 있다.
형태는 styled.ㅇㅇ로 ㅇㅇ의 자리에는 html요소가 온다.
//예시 코드
const ST = styled.div `
color : blue;
`;장점 : 컴포넌트이므로 if, switch 같은 조건문도 사용이 가능하다.
ℹ️ 짚고 넘어가기
porps? 부모컴포넌트에서 자식컴포넌트로 내려주는 데이터
이때, 스타일 속성을 props로 볼 수 있다.
Sass(Syntactically Awesome Style Sheets)
비슷한 맥락이나 코드의 재사용성을 높이고 가독성을 향상시켜준다.
특징
1. 변수의 사용이 가능하다.
2. 중첩(Nesting)이 가능하다.
3. 다른 파일을 import할 수 있다
(보통의 회사의 경우 자주쓰는 컬러를 변수로 선언해둔 후 import하는 방식으로 많이 사용한다고 함!)
React Hooks_UseState
- 가장 기본적인 hook
- 함수형 컴포넌트에서 가변적인 상태를 갖게 한다.
(카운터, todo를 만들었던 예제를 떠올리자)
const[state, setState]=useState(initialData)
state= 변수 , setState=state의 수정값
ℹ️ batch?
리액트에서 일반형의 경우 배치(batch)형식으로 처리된다.
한줄한줄 처리되는 방식이 아니라 모아서 한번에 처리한다에 가까운 처리 방식인데, 이렇게 진행하는 이유는 리렌더링을 방지하기 위함이다.
예를 들어, 아래와 같이 코드가 3줄이 있다 가정해보자.
setNum(currentNum => currentNum + 1);
setNum(currentNum => currentNum + 1);
setNum(currentNum => currentNum + 1);일반형의 경우 배치형으로 처리되므로 3줄이 존재해도 1번만 실행된다.
하지만 함수형의 경우 함수 내의 동작으로 인식해 3번을 모두 실행하게 되는 것이다.
React Hooks_useEffect
렌더링 될때 특정작업을 수행해야 할때 사용되는 훅이다.
즉, 컴포넌트가 화면에 보여지거나 화면에서 사라졌을때 내가 어떤 작업을 수행해야 한다면 useEffect훅을 사용하게 되는 것이다.
useEffect에서 중요한 개념은 의존성 배열(dependency array)이다. 이 배열의 경우 값을 넣으면 그 값이 바뀔때만, useEffect를 사용하겠다는 용도를 가지고 있다.
// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
useEffect(()=>{
// 실행하고 싶은 함수
}, [의존성배열])만약 컴포넌트가 렌더링 될때, 단 한번만 실행하고 싶다면 빈배열을 넣어 주면 된다.
반대로 배열안에 value라는 값이 들어가게 된다면 value가 들어올때마다 작업을 수행하게 되는 것이다.
회고
React Hooks 개념이 연결연결되어 사용이 되어지니 각자의 쓰임새를 잘 기억하고 있어야 겠다.
