useState
1. 기존업데이트방법
//배치 업데이트(중복되는 소스를 적어도 한번만 실행됨)
onClick={() => {
setCount(count + 1)
}}
2. 함수형 업데이트 방법
//중복되는 소스가 있어도 한번씩 순차적으로 실행된다.
onClick={() => {
setCount((cur) => cur + 1})
}}useEffect
- 렌더링 될때마다 특정한 작업을 수행해야할때 설정하는 훅
- 컴포넌트가 화면에 보여졌을때
- 컴포넌트가 화면에서 사라졌을때
useEffect(()=> {
console.log('Hello');
//cleal up 컴포넌트가 사라질때 실행되는부분
return () => {
console.log('Bye');
}
},[])
//처음 한번만 실행할경우 빈배열 넣어준다 []useRef
- DOM요소에 접근할 수 있도록 도와주는 Hook이다.
- 컴포넌트가 계속해서 렌더링이 되어도 Unmount전까지 값을 유지한다.
1. 저장소로서의 기능
const [count, setCount] = useState(0);
const countRef = useRef(0);
const plusState = () => {
setCount(count + 1);
}
//useState를 사용한값은 화면에 렌더링되어 보여지지만
const plusRef = () => {
countRef.current++;
}
//useRef로 사용한 값은 화면에 보여지지 않고 console.log에만 값이 변하는게 찍힌다.
//console.log로 초기값을 찍어주면 객체 형식으로 들어가는게 보이기때문에 .current를 꼭 사용해야 value값을 가져올 수 있다.
📌 1. state는 리렌더링이 꼭 필요한 값을 다룰때 쓴다.
2. ref는 리렌더링을 발생시키지 않는 값을 저장할때 사용한다.(내부적으로 안봐도 되는값)
2. DOM요소 접근
const idRef = useRef('');
//최초 진입시 input에 포커스 되게
useEffect(() => {
idRef.current.focus()
},[])
return(
<input type='text' ref={idRef} />
)최적화
1. 리렌더링 조건
- 컴포넌트에서 state가 바뀌었을때
- 컴포넌트가 내려받은 props가 변경되었을때
- 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트 모두
2. 최적화
리렌더링이 빈번하게 일어난다는것은 좋지 않으므로 불필요한 렌더링이 발생하지 않도록 한다.
React.memo(컴포넌트)
컴포넌트를 메모리에 저장해두고 필요할때 가져가 쓰는방법.
부모 컴포넌트의 state변경으로 인해 props가 변경되지 않는이상 부모 안에 들어 있는 자식 컴포넌트는 리렌더링이 되지 않는다.
// 자식 컴포넌트 내보내기할때 React.memo로 써주면 부모state값이 변해도 자식은 리렌더링 되지 않는다.
export default React.memo(Box)useCallback(함수를 저장)
부모에 있는 state값 변경을 위해 자식컴포넌트에게 부모 state값을 활용한 이벤트props를 넘겨줬을때 부모컴포넌트에만 있는 이벤트를 작동해도 자식컴포넌트까지 같이 리렌더링 되기에 useCallback을 사용해 이벤트props를 넘겨준다.
//기존코드
const initCount = () => {
setCount(0)
}
//useCallback을 적어준다.
const initCount = useCallback(() => {
setCount(0)
},[])
// []안에 useEffect와 같이 변하고자하는 값이 있을때마다 실행되기를 원할때 안에 값을 넣어주면된다.useMemo(값 자체 저장)
한 컴포넌트에 두개의 이벤트 함수가 있을경우 각각의 이벤트를 실행할 경우에도 모든 이벤트가 리렌더링되기에 값을 저장해준다.
- useMemo를 남발하게 되면 메모리 확보를 많이 하기 때문에 성능이 악화될 수 있다.
const me = () => {
name:'kim',
isAlive : isAlive ? 'live' : 'dead'
}
//useMemo를 사용해 값을 최초로 저장해준다.
const me = useMemo(() => {
name:'kim',
isAlive : isAlive ? 'live' : 'dead'
};
},[isAlive]);
Lifecycle
Mount
컴포넌트가 화면상에 나올때
Update
컴포넌트가 갱신될때, 리렌더링될때(state, props, 부모컴포넌트 변경될때)
Unmount
화면에서 컴포넌트가 죽을때(useEffect의 return 과 비슷)
