데이터 출력

[승]

json 형식으로 만든 오브젝트 배열을 useState()에 저장하고
useEffect()와 Math.random()를 이용하여 순서를 섞은 후 map()을 이용해 출력하는데 섞어놓은 순서대로 출력되지 않습니다.

return문에 {console.log(data)} 로 출력해보면 콘솔창에는 섞인 순서대로 랜덤으로 출력되지만
터미널에는 섞이기 전 순서대로 출력되네요ㅜㅜ

대체 왜 콘솔창과 터미널의 값이 다르게 나오는 건가요?

[codingapple]

터미널엔 서버측 실행결과만 보여주는데 useEffect는 서버에서 실행되지 않아서그런듯요

[승]

  const datas = require("/public/data/data.json");
  const [data, setData] = useState(datas);

  function shuffle(array) {
    return array.sort(() => Math.random() - 0.5);
  }

  useEffect(() => {
    setData(shuffle(data));
  }, []);

  return (
    <div className="Section">
      {datas.map((item, i) => {
        return (

데이터를 가져와서 state에 넣고 페이지 로드시마다 셔플함수를 사용해서 섞어준 후 map()으로 출력하는데 계속 섞이기 전 순서대로만 출력됩니다.
코드 내에서 변경사항이 생겨서 저장 했을 때 가끔 랜덤으로 바뀌었다가도 페이지를 새로고침하면 또 순서대로 정렬되는데 대체 뭐가 문제인건가요ㅠ
순서나 함수 사용에 문제가 있는 건가요? 따로 디비는 사용하지 않고 json 파일 만들어서 출력하고 있습니다!!

[codingapple]

require 문법은 컴포넌트 바깥에서 씁시다

[승]

컴포넌트 바깥으로 빼서 props로 받아 사용하는데 바뀌기 전 데이터를 보여준 후 섞인 데이터로 출력합니다..

useEffect()가 두 번 실행되는건가 해서 
const nextConfig = {
  reactStrictMode: false,
};
도 해봤는데 이게 아니네요

useState()에 false를 넣었다가 useEffect()가 실행될 때 함께 true로 바꿔서 true면 출력하게 할까 시도해봤는데 data.map()으로 출력하는 부분에서 에러가 나더라고요
성공하더라도 로딩에 시간이 걸릴 것 같은데 이 방법을 사용하는게 맞나요?

[codingapple]

원래 useEffect보다 html이 먼저 실행되어서 그런듯요 
컴포넌트바깥에서 데이터 셔플한번하고 html에 그거 박아봅시다

[글쓴이]

글