안녕하세요 저번에 질문드려서 USE EFFECT로 해결했었습니다.
다만 논리적으로 뭔가 이상해서 질문 드립니다.
let [est_data,change_est_data] = useState("초기값") //데이터가 없다고 일단은 가정
useEffect(()=>{
change_est_data([...Estimation_data]) // 나중에 AXIOS를 이용해 데이터를 받아와 STATE를 변경하기 위해서 임의로 흉내냄
},[])
Estimation_data 를 원래 백엔드에서 받으려고 했는데, 임의로 테스트 데이터를 만들어 놓은 상태로 사용하려고 저렇게 놓게 되었습니다.
따라서 이후에 페이지가 한번 렌더링 될때, 백엔드에서 USE EFFECT는 한번만 실행하므로, 페이지가 처음 만들어 질 때 데이터를 가져와서 STATE를 바꿔야지!
라고 생각을 했었습니다.
그런데 페이지가 저렇게 사용하면 잘 작동하지 않더군요
생각을 해보니, USE EFFECT를 이용해서 STATE를 변경하게 되면 STATE가 변경되었으므로 페이지가 다시 렌더링 되며 제가 원하는 데이터 값이 STATE에 안들어가고 초기값만 남는것 같았습니다.
후에 페이지가 로드가 될때, 필요한 데이터들은 AXIOS 이용하여 받으려고 했는데.. 뭔가 이렇게 진행이 되면 안될 것 같습니다.
아마 조금 더 생각해보니, use effect는 랜더링이 전부 다 된 뒤에 호출이 되는데, 제가 하려는건 렌더링이 다 되지 않은상태에서 데이터를 동기화 시켜줘야 하다보니, 랜더링을 하는 시점에서는 use effect가 호출이 안되므로 초기값으로 계속 그리려 하다보니 오류가 나는 것 같습니다.
랜더링이 다 그려지지 않았을때 함수가 실행되어 데이터가 동기화 되어야 될것 같습니다
혹시 좋은 방법이 있을까요?
감사합니다
////
글을 작성하고 조금더 머리를 굴려보니
지금 해보니 use effect는 다 랜더링 되어야 실행이 되니 use effect 실행 전에 { === } 삼항연산자 활용해서 로드가 안되었다면 페이지를 안 보여줌으로 하면 랜더링을 그동안 막을 수 있다고 생각해서 이렇게 하니 잘 돌아가네요..
혹시 이것을 삼항 연산자 말고 {} 안에 함수를 만들어서 하는 방식도 동작이 가능할까요? ()=>{} 안에 조건문과 해당 컴포넌트 코드를 같같이 넣는
()=>{
만약 state값이 null이 아니면
필요 코드 실행
} 이런 방식입니다. 코드를 넣었는데 이렇게는 동작하지 않는 것 같아서 제가 잘 못한거 같아서 질문드립니다.
갑자기 ui를 배워서 써야될 일이 생겨서 리액부터 공부하니 무언가 제가 질문하는게 자바스크립트인것 같기도 합니다..
감사합니다
