2024.01.30 TIL

useState와 useRef 비교하기

useState와 useRef의 차이점을 알아보기 위해 간단한 코드를 작성해보았다.

function App() {
 
    console.log("렌더링 되었음")
    
    const [text, setText] = useState('');

    const handleStateChange = (e) => {
        const newText = e.target.value;
        setText(newText)
        console.log(newText)
    }

    const inputRef = useRef();
    const handleRefChange = () => {
        console.log(inputRef.current.value);
    }

    return (
        <div>
            State <input value={text} onChange={handleStateChange} /><br></br>
            Ref <input ref={inputRef} onChange={handleRefChange} />
        </div>
    )
}

두 input에 각각 state와 ref를 사용하여 값을 추적하도록 하고 onChange의 함수를 통해 입력값이 변경될 때마다 해당 값을 콘솔에 출력하여 값을 확인할 수 있도록 하였다.

또한 App 컴포넌트의 리렌더링 여부를 확인하기 위해 '렌더링 되었음'을 콘솔에 출력하도록 작성하였다.

 

state 인풋에 값을 입력하면 변경되는 값이 입력됨과 동시에 '렌더링 되었음'이 동시에 출력되어 값이 입력될때마다 리렌더링이 일어나고 있음을 알 수 있다.

반면 ref 인풋에는 값을 입력해도 변경된 값만 출력될 뿐 리렌더링이 일어나지 않는다.

 

 

---

import한 컴포넌트에 추가 스타일 지정하기

const DateTime = styled(Date)`
    position: absolute;
`

-> DateTime은 import한 Date 컴포넌트에 스타일을 추가 지정한 컴포넌트

 

styled component에 hover 속성 지정하기

const Box = styled.div`
    width: 20px;
    height: 20px;
    
    &:hover {
        cursor: pointer;
    }
`

&: 를 쓰고 active 등 속성을 지정하면 된다.