React to_do_list developing

function Main(props){

  return (
    <div className='main_list'>
      <p><a href='/' className='list' onClick={e=> {
        e.preventDefault();
        props.onChangeMode(e.target.className);
       } }>목록 보기</a></p>
      <p><a href='/' className ='write' onClick={e=> {
        e.preventDefault();
        props.onChangeMode(e.target.className);
       } }>글쓰기</a></p>
    </div>
  )
}

• 하나씩 기능을 구현해보는 중인데 카테고리 별로 파일을 나누어서 컴포넌트를 관리하는 것도 좋을 거 같다.
• APP 파일에 모든 코드가 쓰여져 있으니 머리가 아프고 구분이 안 간다...

  const [mode, setMode] = useState('first_page')
  const [id, setId] = useState(null);

  let data_content = null;

  if(mode === 'first_page'){
    data_content = <Article body="오늘의 할 일을 적어보세요!"/>
  } else if(mode === 'data_list'){
    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
      }
    }
    data_content = <Article title={title} body={body}/>
  } else if(mode === 'write'){
    data_content = <div>
        <p><input type ="text" name = "title" placeholder='title'/></p>
        <p><textarea name = "body" placeholder='body'/></p>
        <p><input type ="submit" value="create"/></p>
    </div>
  }

• 버튼이나 링클르 이용하여 작성하는 중인데 먼저 한 페이지에서 구현을 하고 MODE를 추가하는 편이 좋았을 거 같다.
• 아직 ID값을 어떻게 처리할지 고민이다.

아직 고쳐야할 부분

• 삭제시 ID 값 변경
• 디자인? 화면배치? 일단 깔끔하게만 해놓자!