리액트 react create

예제

function Article(props) {

  return <article>

  <h2>{props.title}</h2>

  {props.body}

</article>

}

function Header(props) {

  return <header>

  <h1><a href="/" onClick={(event)=>{

    event.preventDefault(); // 기본 동작 방지

    props.onChangeMod();

  }}>{props.title}</a></h1>

</header>

}

function Nav(props) {

  const lis = [];

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

    let t = props.topics[i];

    lis.push(<li key={t.id}>

      <a id={t.id} href={'/read/'+t.id} onClick={event=>{

        event.preventDefault();

        props.onChangeMod(Number(event.target.id));

      }}>{t.title}</a>

      </li>);

  }

  return <nav>

  <ol>

    {lis}

  </ol>

</nav>

}

function Create(props) {

  return <article>

    <h2>Create</h2>

    <form onSubmit={event=>{

      event.preventDefault();

      const title = event.target.title.value;

      const body = event.target.body.value;

      props.onCreate(title, body);

    }}>

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

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

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

    </form>

  </article>

}

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') {

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

  }else if (mode === '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') {

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

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

      const newTopics = [...topics]

      newTopics.push(newTopic);

      setTopics(newTopics);

      setMode('READ');

      setId(nextId);

      setNextId(nextId+1);

    }}></Create>

  }

  return (

    <div>

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

        setMode('WELCOME');

      }}></Header>

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

        setMode('READ');

        setId(_id);

      }}></Nav>

      {content}

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

        event.preventDefault();

        setMode('CREATE');

      }}>Create</a>

    </div>

  );

}

export default App;

 

결과

 

풀이

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

        event.preventDefault();

        setMode('CREATE');

      }}>Create</a>

App 컴포넌트에 Create라는 a태그를 눌렀을때 페이지 리로드가 일어나지 않기 위해 event.preventDefault(); 사용

Create라는 a태그를 눌렀을때 mode의 값을 setMode를 통해 CREATE 상태로 변경

  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;

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

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

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

      const newTopics = [...topics]

      newTopics.push(newTopic);

      setTopics(newTopics);

      setMode('READ');

      setId(nextId);

      setNextId(nextId+1);

    }}></Create>

  }

mode 의 값의 CREATE라면 </Create> 컴포넌트 실행

_title, _body를 받는 onCreate 함수를 정의

function Create(props) {

  return <article>

    <h2>Create</h2>

    <form onSubmit={event=>{

      event.preventDefault();

      const title = event.target.title.value;

      const body = event.target.body.value;

      props.onCreate(title, body);

    }}>

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

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

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

    </form>

  </article>

}

submit 버튼을 눌렀을때 페이지 리로드가 일어나지 않기 위해 event.preventDefault(); 사용

title, body 변수에 event.target.(name).value로 작성된 값을 담음

props를 통해 onCreate함수 실행

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

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

      const newTopics = [...topics]

      newTopics.push(newTopic);

      setTopics(newTopics);

      setMode('READ');

      setId(nextId);

      setNextId(nextId+1);

    }}></Create>

newTopic에 작성한 값을 담음

newTopics에 topics의 값을 복제

복제한 값에 생성한 newTopic의 정보를 담음

setTopics(newTopics)를 통해 기존의 값과 복제된 값을 비교하여 달라졌기 때문에 새로 렌더링함

setId(nextId)를 통해 id를 부여해줌

setNextId(nextId+1)를 통해 다음에 생성될 id값을 생성해줌