동행큐브
729
2020-12-02 10:13:58
3
203

리액트 관련해서 질문이 있습니다.


개발중인 리액트 페이지가 있습니다. 

현재 있는 컴포넌트는 main, view, add가 있습니다. 

main의 type 상태값에 따라 main 안에 view 또는 add가 렌더링 됩니다. 

view는 main으로부터 상태값을 전달받아 input으로 보여줍니다. 

이때 main이 view로 전달한 상태값을 view에서 수정할 때 클래스형 컴포넌트에서는 this.setState, 함수형 컴포넌트에서는 useState를 사용해서 수정했는데 둘다 값이 변경될 때 리렌더링이 되더군요. 

그래서 함수형 컴포넌트에서 useState를 쓰면 무한루프로 렌더링이 되고 클래스형 컴포넌트에서는 이 상태값 변경하기 위한 this.setState를 넘겨줘서 상태값을 관리하기 너무 복잡하고요. 

리렌더링이 발생하지 않고 데이터를 관리할 수 있는 방법이 없을까요?

0
  • 답변 3

  • 초보자1212
    2k
    2020-12-02 10:22:12 작성 2020-12-02 10:22:33 수정됨

    무한 루프로 빠질 수가 없는데 빠졌다는건 코드를 잘못 작성하셨다는거에요.

    정상적이라면 무한 리렌더링이 되지 않습니다


    값이 변경되었을 때 리렌더를 발생시키지 않게하려면 useRef 를 사용하시는 것도 하나의 방법입니다

  • 개이득인개발
    4k
    2020-12-02 10:32:35 작성 2020-12-02 10:33:16 수정됨

    main <- 부모, view <- 자식

    부모에서 넘겨준 props는 자식이 수정하면 안됩니다. change함수를 넘겨줘서 부모에서 보통 수정하거나, 독립적인 state를 만들어고 자식에서 수정하여 부모에게 넘겨줘서 상태변화를 알려주는 방법이 있습니다.

  • 동행큐브
    729
    2020-12-02 16:18:20
    감사합니다! 제가 잘못 짠게 맞았네요! view에서 반복문을 도는데 setState를 하니 당연히 무한렌더링이 될수밖에요.. 답변 감사합니다!
  • 로그인을 하시면 답변을 등록할 수 있습니다.