같은 데이터인데, 차이점이 이해가 안됩니다.

[Maldive]

1️⃣(App.js의 Edit컴포넌트)  let 바로부른글 = props.post; 
( server.js ) db.collection("post").findOne( {_id: parseInt(요청.params.id)}, 

 2️⃣(App.js의 Edit컴포넌트)

let 리스트중찾은글 = props.posts.find(function (글) {return 글._id === parseInt(id);});

질문) 1번 2번 둘 다 같은  데이터인데, 1 번은 글수정페이지 입장시 input 에 빈칸으로 나와요.

둘의 차이가 뭔지 이해가 안갑니다.

let 바로부른글 = props.post;   ===> 이 부분 제가 잘 못 표현한거 혹시 있나요?

(props.post. title 이런 read only 단순 바인딩은  잘되요.)

 

1 번으로 수정 진행시 input 초기에 빈칸, ( 수정은 되지만  편집용으로 무의미 )

name="TITLE"
 value={바로부른글값.TITLE}

2번으로 수정 진행시 input 데이터값 출현과 수정 둘다 잘됨.

name="TITLE"
 value={리스트중찾은글값.TITLE}

[Maldive]

1번은 수정페이지 입장 전에 axios로 부른글을 Props로 받은거고,  2번은 수정페이지 입장 후 찾은글이라서 그런가요? 그런데 어차피 props.posts란 리스트도 props로 받은건데 둘다 같은 입장이란 생각에 이해가 안됩니다.

[codingapple]

props는 변수에 담아써도 상관없습니다 

코드가 극히일부라 이해는 잘 안되는데

props는 부모로부터 데이터를 물려받을 때 사용하는건데 App.js도 props를 이용해서 부모에게 데이터를 물려받은 상황인가요?

[Maldive]

아니요. 저는 App.js , index.js 파일 두개만 있고요,  App만 부모에요.

App 부모 / PlanEdit 자식 - 1 세대의 단순한 구성에 route만 해줬어요.

<Route path="/planedit/:id">
          <PlanEdit posts={posts} setPosts={setPosts} post={post} setPost ={setPost} />
</Route>

자식컴포넌트 구성 코드는요,

let { id } = useParams();

let 찾은글 = props.posts.find(function (글) {
    return 글._id === parseInt(id);
  });

  let [찾은글값, 찾은글값변경] = useState({
    TITLE: 찾은글.title,
    CONTENT: 찾은글.content,
    DATE: 찾은글.date,
  });
  let editField = (e) => {
    찾은글값변경({ ...찾은글값, [e.target.name]: e.target.value });
  };

같은 구성에  let 부른글 = props.post;  만 적용하면 , 같은데이터인데도 input이 빈칸이 되는게 이해가 안되요.

되는거로 하면 되지 생각했다가도 뭔가 중요한걸 내가 모르고 있는게 아닐가 해서요.

let 부른글 = props.post;  이렇게 변수에 담아써도 된다고 하셔서 코드문제에선 일단 안심이에요.

[codingapple]

찾은글말고 부른글을 이상하게만든것이 아닐까요

[Maldive]

네 부른글이 axios로 잘 불려와놓고, 이렇게 적용하면 input 에서는 안보여주니,

부른글 문제인데 무슨 차이인지 제 능력밖이에요.ㅜㅜ   되긴하니까,  이제 프로필 에디트 기능  꾸미려고요.

let 부른글 = props.post; // ❓이건 왜 안되?
let [부른글값, 부른글값변경] = useState({
    TITLE: 부른글.title,
    CONTENT: 부른글.content,
    DATE: 부른글.date,
  });
  let editField2 = (e) => {
    부른글값변경({ ...부른글값, [e.target.name]: e.target.value });
  }; 

[codingapple]

ajax로 부른글 불러오고나서

컴포넌트가 재렌더링이 안되거나 그럴 수도 있을듯요

[Maldive]

네 말씀해주신 그 문제 같기도 해요.  ?

App부모에서 history 로 edit컴포넌트로 이동하게 해놨거든요. 이거 새로고침 없이 이동하는거잖어요. 

저녁쯤에 시험해보려고요. 

onClick={() => {
            axios
            .get(`/planedit/${posts[i]._id}') 중략 });

            history.push(`/planedit/${posts[i]._id}');
              }}

[Maldive]

Link/history 둘다 새로고침 없는 routing이고, 차이는 Link는 JSX안에서 바로 쓸 수 있다는 것 뿐이던데,

뭘로 routing해도 자식 component에서 axios get요청->server get응답으로 직접 부르면, 요청과 응답은 완료되지만, input이 첨에 빈칸이고,  홈으로 되돌아갔다가  다시 와야 input에 수정가능한 데이터로 뜨더라구요. 

부모가 처음에 axios 요청한 데이터를 props로 받아와서  params 로 찾은 데이터는 새로고침없어도 바로 input에 뜨니까, 그냥 이 방향으로 하려구요. 이렇게 하면 자식의 get 요청 axios랑 get 응답 server 도 필요없어서 다 없앴어요.

 

[codingapple]

넴 useeffect에서 get요청하는 것도 한번 시도해보십시오

[글쓴이]

글