⚛️React : section08 - Create

이번 수업에는 Create컴포넌트를 생성할 것이다. Create컴포넌트를 사용하기 위해서는 props와 useState를 잘이해해야한다. useState는 현재의 상태를 컨트롤 할 수 있는 역할이다. 우선 App컴포넌트를 살표보자

function App() {

  //조작하고 있는 장치

  const [mode, setMode] = useState('WELCOME');

  const [id, setId] = useState(null);

  const [nextId, setNextId] = useState(4);

  const [topics, setTopics] = useState([

    { id: 1, title: 'html', body: 'html is..' },

    { id: 2, title: 'css', body: 'css is..' },

    { id: 3, title: 'javascript', body: 'javascript is..' }

  ])

  let content = null;

  if (mode === 'WELCOME') {  //WELCOME모드이면..

    content = <Article title="Welcome" body="Hello, WEB" ></Article>

  } else if (mode === 'READ') { //READ모드이면..

    let title, body = null;

    for (let i = 0; i < topics.length; i++) {

      if (topics[i].id === id) {

        title = topics[i].title;

        body = topics[i].body;

      }

    }

    content = <Article title={title} body={body} ></Article>

  } else if (mode === 'CREATE') {  //CREATE모드이면..

    content = <Create onCreate={(_title, _body) => {

      const newTopic = { id: nextId, title: _title, body: _body }

      const newTopics = [...topics] //newTopic값을 push하기 위해서는 기존 topics를 스프레드해야한다. 그리고 해당 변수에 push 해야한다.

      newTopics.push(newTopic);

      setTopics(newTopics);

      setMode('READ');

      setId(nextId);

      setNextId(nextId + 1)

    }}></Create>

  }

  return (

    <div>

      <Header title="WEB" onChangeMode={() => {

        // mode = 'WELCOME';

        setMode('WELCOME')

      }}></Header>

      <Nav topics={topics} onChangeMode={(_id) => {

        setMode('READ')

        setId(_id);

      }}></Nav>

      {content}

      <a href="/create" onClick={event => {

        event.preventDefault();

        setMode('CREATE')

      }}>Create</a>

    </div >

  );

}

export default App;  //contact App_5.js

기존에 작성한 객체 또한 useState로 변환했다. 전반적으로 컴포넌트들을 눌렀을 때 useState의 값들이 변경되는 구조로 되어 있다. 우선 setMode가 그런 역할을 하는 것이다. Nav컴포넌트로에서 event(event.targe.id)로 선택받은 값을 setId로 받아 해당 id가 content로 받아 브라우저에서 어떤 값을 보여줄지 결정되는 것이다. 이것은 전시간에도 다루었던 문제다. 하지만 생각보다 복잡하기에 다시 한번 설명한 것이다. 이제 생성된 Create 컴포넌트를 살펴 보자.

function Create(props) {

  return <article>

    <h2>Create</h2>

    <form onSubmit={event => {

      event.preventDefault();

      const title = event.target.title.value;//name이 title인 값을 가져온다.

      const body = event.target.body.value;

      props.onCreate(title, body)

    }}>

      <p><input type="text" name="title" placeholder="title"></input></p>

      <p><textarea name="body" placeholder="body"></textarea></p>

      <p><input type="submit" value="Create"></input></p>

    </form>

  </article>

}

Create 컴포넌트에서 form태그를 유심히 봐야한다. title 변수에는 title name을 가지고 있는 input태그의 value값을 가지고 온다. 그래서 event.traget.title.value라고 name을 직접 언급해야한다. 그리겋게 해당 값이 props를 통해서 onCreate 함수에 title과 body를 인가한다. 해당 create 구문은 content에서 다루어진다. 아래 코드를 살펴보자.

else if (mode === 'CREATE') {

    content = <Create onCreate={(_title, _body) => {

      const newTopic = { id: nextId, title: _title, body: _body }

      const newTopics = [...topics]

      //newTopic값을 push하기 위해서는 기존 topics를 스프레드해야한다. 그리고 해당 변수에 push 해야한다.

      newTopics.push(newTopic);

      setTopics(newTopics);

      setMode('READ');

      setId(nextId);

      setNextId(nextId + 1)

    }}></Create>

  }

Create 버튼을 누르면 Create모드가 켜진다. 이와 동시에 mode가 Create를 인지하고 content는 Create 컴포넌트가 동작하게 된다. onCreate함수로 전달 받은 title과 body는 객체로 nowTopic에 자리 잡게되고 해당 newTopic은 기존에 있던 tiopic에 추가해야하는데 이를 newTiopics로 스프레드로 전달 후 push를 통해 새로 만들어진 객체를 추가하게 된다. nextId는 해당 객체의 고유 값을 부여하기 위함인데 기존의 객체들이 3개라서 그 다음 값을 주기 위해 기본값으로 4를 주었다. 사실 이 방법은 매우 좋은 방법은 아니라고 판단된다. 이후 객체가 추가 되면 즉, create하게 되면 nextId값을 1을 증가 시키게 되어 있다. 점점 더 복잡해지고 있다. 정확하게 잘 판단하고 나누어서 봐야한다.