[짜잘한 react] 다른 컴포넌트에서 인풋과 리스트를 가진 문제

다른 컴포넌트에서 인풋과 리스트를 가진 문제

1. 둘을 모두 가지고 있는 부모 컴포넌트에 useState 선언

• 공유해야 하는 state를 부모에서 선언하여 둘을 관리
• upload에서 input을 통해 content를 받고, 이를 부모의 state리스트에 적용.
• Input을 통해 업데이트된 contentlist를 list 컴포넌트에서 받아 적용.

function App() {
	// contentlist state 선언
  const [ContentList, setContentList] = useState([])

  return (
    <>
      <Heading />
      <Routes>
        <Route
          path="/Upload"
          element={
          
          // contentlist state를 공유
            <Upload ContentList={ContentList} setContentList={setContentList} />
          }
        />
        <Route
          path="/List"
          element={
          // contentlist state를 공유
            <List ContentList={ContentList} setContentList={setContentList} />
          }
        />
      </Routes>
    </>
  )
}

2. state를 받는 자식은 props를 통해 받음

// props로 contentlist, setcontentlist 모두 받음.
const Upload = (props) => {
  const [Content, setContent] = useState('')

  const onSubmit = () => {
    let tempArr = [...props.ContentList]
    tempArr.push(Content)
    props.setContentList([...tempArr])
    setContent('')
  }

  return (
    <div>
      <input
        type="text"
        value={Content}
        onChange={(event) => {
          setContent(event.currentTarget.value)
        }}
      />
      <button
        onClick={() => {
          onSubmit()
        }}
        style={{ marginBottom: '1rem' }}
      >
        제출!
      </button>
    </div>
  )
}