steadily
451
2021-08-06 19:25:51 작성 2021-08-06 19:35:05 수정됨
2
115

자식 컴포넌트에서 부모 컴포넌트로 useState 값을 전달하려고 합니다.


안녕하세요. 마크다운 에디터 컴포넌트에서 선언한 useState 값(불린 입니다)을 부모 컴포넌트에서  활용하고 싶습니다. 구글링해서 찾아본 결과 onChange 함수일 경우 props.onChange(내용) 이렇게 보내는 것으로 알고 있습니다.

자식 컴포넌트의 일부(직접적으로 보내고 싶은 useState가 들어있는 곳)는 이렇습니다.

onChange에 할당된 handleChange 함수에서 contentNotFoundError 상태를 관리합니다.

const Markdown: FC<Props> = (props, value) => {
const [contentNotFoundError, setContentNotFoundError] = useState(true)
const {
initialValue,
previewStyle,
height,
initialEditType,
useCommandShortcut,
} = props

const editorRef = useRef<EditorType>()
const handleChange = useCallback(() => {
if (!editorRef.current) {
setContentNotFoundError(true)
return
} else {
setContentNotFoundError(false)
console.log(contentNotFoundError)
props.onChange(contentNotFoundError)
}

const instance = editorRef.current.getInstance()
const valueType = props.valueType || 'markdown'

props.onChange(
valueType === 'markdown' ? instance.getMarkdown() : instance.getHTML(),
)
}, [props, editorRef.current])

return (
<div>
<EditorWithForwardedRef
{...props}
initialValue={initialValue || 'hello react editor world!'}
previewStyle={previewStyle || 'vertical'}
height={height || '550px'}
initialEditType={initialEditType || 'markdown'}
useCommandShortcut={useCommandShortcut || true}
ref={editorRef}
onChange={handleChange}
/>
</div>
)
}

export default Markdown


여기서 이제 contentNotFoundError를 부모 컴포넌트에서 사용하고 싶은데,

<Markdown
onChange={(contentNotFoundError) =>
setContentNotFoundError(...contentNotFoundError)
}
/>

부모 컴포넌트에서 자식 컴포넌트를 이런 식으로 불러오는게 맞는건지 모르겠습니다. 어떤 식으로 해야되나요..? 다른 props.onChange도 있으나, contentNotFoundError useState에 대해서만이라도 알려주시면 감사하겠습니다..!!

0
  • 답변 2

  • 메이플비
    398
    2021-08-06 23:36:23 작성 2021-08-06 23:37:01 수정됨

    마지막줄 처럼 하시면, 이건 부모의 부모가 보냈을 경우만 가능합니다.

    일반적인 방법으로는 자식에서 부모로 거꾸로 프랍이 올라가는 경우는 없고 이런경우 몇가지를 고려해볼 수 있습니다.

    1. 스테이트를 아에 부모컴포넌트에서 선언하고 자식으로 내려보내기

    2. 부모 컴포넌트에서 값이 바뀌면 그 값을 내려보내서 useEffect 등으로 스테이트를 업데이트 하기

    3. 부모 컴포넌트에 랜더함수를 짜서 자식으로 내려보내기. 무슨말인고 하니 함수가 setState를 argument로 받아서 쓰는경우 입니다.

    예를들어서 부모 컴포넌트에서

    const renderSomething = (setContentNotFound) => {

     내용

    };

    이런식으로 짜서 자식으로  renderSomething을 자식으로 내려보내는 경우지요. 이 경우 함수로 내려오니까 자식컴포넌트에 있는 변수들을 아규먼트로 넣어서 사용할 수 있게 되는것이구요.

  • steadily
    451
    2021-08-07 09:47:54 작성 2021-08-07 09:50:49 수정됨

    메이플비 선생님 늦은 밤에 자세한 답변 정말 감사합니다.

    말씀하신 것처럼 한번 해보겠습니다. 좋은 주말 보내시길 바라요 감사합니다!

  • 로그인을 하시면 답변을 등록할 수 있습니다.