state 관리 - 새로 고침

리액트는 state 변경에 따른 페이지를 다시 그린다.

 

AS - IS는

 

데이터를 가져와서 제이쿼리 할아버지에게 처리를 부탁했다. (돔 직접 접근)

 

리액트는 데이터를 랜더링하는 부분에서 state를 통해서 진행하기 때문에 DOM에 직접 접근이 거의 필요 없다. 이벤트 캐취하는 상황에서 필요한 상황이 있긴 하다.

 

state 관리하는 있어 몇 가지 알고 있으면 좋을듯 하여 정리s

 

상태 관리는 비동기 때문에 바로 변경되지 않고 한방에 몰아서 처리 된다고 한다.  

 

따라서 별개로 관리하는것이 아니라 객체로!! 관리s 

 

const [viewOpen, setViewOpen ] = useState(false)
const [editOpen, setEditOpen ] = useState(false)  
.... 
// 추천
const [props, setProps] = useState({
        viewOpen:false,
        editOpen: false,
        ...
 })

 

상태가 변경되면 자동으로 새로고침(?)이 된다... 다시 랜더링을 한다. 

 

새로고침이 필요한 상태이기 때문에 다시 불러와야 한다. 

    useEffect(() => {
        // 새로 고침을 위해 사용!.
        context.actions.setRefreshKey = setRefreshKey;
        if(context.viewOpen){
            apiGetClient()
        }
    }, [context.id, context.viewOpen, refreshKey]);

 

클라이언트의 뷰를 보여 주는 화면인데....다른 컴포넌트에서 클라이언트의 스코프만 변경했다고 하면..

 

클라이언트의 뷰를 새로 불러봐야 한다.

 

But 상태를 체크하는 id와 viewOpen으론 한계가 있다.

 

의미 없는 값(refreshKey)을 상태 변경하여 새롭게 랜더링 하도록 꼼수 아닌 꼼수를 쓰자!