import React, { useRef } from "react"; //1. useRef 를 불러온다

 const styled ={ 
width: "200px", height: "200px", background: "black" 
}; 

export default function App() {
 const handleChange = () => { 
colorChange.current.style = "width:300px; height:300px; background:red;" 
//4. 해당 ref 이름과 current 를이용해 직접 조정할 수 있다.
 }; 

const colorChange = useRef(); 
//2. useRef 를 지정해준다. 
//3. ref 를 이용해 지정한 useRef를 넣는다

 return ( <> <div ref={colorChange} style={styled} /> <button onClick={handleChange}>클릭</button> </> ); }

출처: https://andwinter.tistory.com/321 [index.html]

<div ref={colorChange} style={styled} />  styled에서 style값을 변경하기위해 styled객체를 
집어 넣었는데 colorChange.current.style에서 값을 변경하기 위해 객체값이 아닌 텍스트형식의 값을 집어 넣었는지 궁금합니다. 
생각해보니까 태그 내부의 style값을 변경할려면 colorChange.current.style = "width:300px; height:300px; background:red;" 이렇게 넣는게 맞는데 style={styled}에서 style에 어떻게 styled객체가 집어넣는게 가능함?

저건 되고 이건 왜 안되는지 이해가 안감 ㅡㅡ