React에서 state의 값을 class 외부에서 건드리는 방법을 모르겠습니다! 도와주세요!

Question

JSX 를 사용할때 컴포넌트 클래스를 상속해서 사용하고 있습니다!여러 개의 컴포넌트를 관리하는 list 가 있는 컴포넌트에자식 컴포넌트들을 으로 넣어두고변화가 생겼을때 부모 컴포넌트에서 그 들이 지닌 state에 일괄적으로 변화를 주고 싶습니다.그런데 var u = ; 형태의 JSX 형태의 컴포넌트에서함수를 어떻게 불러서 setState를 어떻게 호출해야 하는지 감이 잡히지 않습니다.선배님들의 조금의 힌트를 부탁드립니다!

songline · Accepted Answer

단순히 Unit 컴포넌트들이 특정 state 값을 공유해야 하는 상황이라면 state 끌어올리기 라는 기법을 활용할 수 있습니다. 간단히 얘기하면 자식 컴포넌트들에 있는 state를 공통된 부모 컴포넌트로 올리고, 자식 컴포넌트들에게는 state와 setState를 props로 넘겨주면서 자식 컴포넌트들이 state 하나를 공유하도록 하는 것이죠. 자세한 건 아래 링크를 참고해주세요.참고: https://ko.reactjs.org/docs/lifting-state-up.html만약 Unit 컴포넌트들이 state를 공유하지는 않지만 일관된 변화를 적용해야 하는 경우(가령 Unit들에 각기 다른 숫자를 저장하고 있는 state가 있으나 상위 컴포넌트에서 버튼을 누르면 각 값들이 1씩 증가해야 하는 경우와 같이)라면 위 state 끌어올리기를 반대로 하는 느낌으로 부모에서 자식 컴포넌트로 변경할 수 있는 값이나 setState 함수를 props로 넘겨주고, 자식 컴포넌트에서 호출해주었으면 하는 함수를 거기에 대입시키는 것으로 제어권한을 넘겨줄 수 있습니다. 아래 코드를 참고해주세요.const Super = () => { const funcList = React.useRef([]); const totalChange = (n) => { funcList.current.forEach((f) => f(n)) }; return (<>

_{) })}}

) } const Sub = ({initNum, funcList}) => { const [num, setNum] = React.useState(initNum); const change = (n) => { setNum(num + n); }; React.useEffect(() => { funcList.current[initNum] = change }, [num]) return (

{num}

) } // ======================================== const root = ReactDOM.createRoot(document.getElementById("root")); root.render();

React에서 state의 값을 class 외부에서 건드리는 방법을 모르겠습니다! 도와주세요!

1개의 답변

#state 목록