Skip to content

React

Jump to bottom
egoing edited this page Feb 14, 2021 · 22 revisions

step0

목표

리액트의 개발환경을 구축하고 싶다.

결과

step1

목표

아래의 코드를 리액트화하고 싶다.

<header>
        <h1>WEB</h1>
      </header>
      <nav>
        <ul>
          <li>
            <a href="/1">html</a>
          </li>
          <li>
            <a href="/2">css</a>
          </li>
          <li>
            <a href="/3">javascript</a>
          </li>
        </ul>
      </nav>
      <article>
        <h2>Welcome</h2>
        Hello, WEB!
      </article>

결과

step2

목표

header, nav, article 태그가 너무 복잡합니다. 이들을 컴포넌트화하고 싶다.

힌트

각 태그를 Header, Nav, Article 라는 이름의 컴포넌트로 만들어서 단순화 해보세요.

<Header />
<Nav />
<Article />

결과

step 3

목표

컴포넌트가 너무 경직 되어 있습니다. HTML 태그 처럼 속성을 통해서 컴포넌트를 커스터마이징 하고 싶습니다.

힌트

아래와 같은 인터페이스를 가지고 있는 컴포넌트를 만들어보세요.

<Nav
  data={[
    { id: 1, title: "html", description: "html is..." },
    { id: 2, title: "css", description: "css is..." },
    { id: 3, title: "js", description: "js is..." }
  ]}
/>
<Article title="제목" description="본문" />

결과

step 4

목표

컴포넌트에 이벤트 인터페이스를 추가해서 핸들러의 상태 변화를 통보 받을 수 있도록 하고 싶다.

힌트

아래와 같은 인터페이스를 가지고 있는 컴포넌트를 만들어보세요.

<Header onChangeMode={function(){
  // 웰컴 페이지가 article 영역에 노출됩니다. 
}}>
<Nav={[
  {id:1, title:'html', description:'html is...'},
  {id:2, title:'css', description:'css is...'},
  {id:3, title:'js', description:'js is...'}
]} onChangeMode={function(topic_id){
  // topic_id에 해당하는 토픽이 article 영역에 노출됩니다. 
}}>

결과

step 5

목표

글생성 기능을 추가하고 싶습니다.

알아야 할 것

  1. 데이터를 변경할 때는 불변성을 유지하도록 주의 합니다.
    1. 원시 데이터 타입은 그냥 변경하면 됩니다.
    2. 배열과 객체는 원본을 복제한 후에 변경하면 됩니다.
    3. 차이는 다음 영상을 참고해주세요. https://youtu.be/fDJG4CjbB3A?t=215 참고 : https://gist.github.com/aluksidadi/10aa07c6f007efc587f793212548ad51
  2. immutable 과 관련된 이슈는 다음 영상을 참고하세요. https://opentutorials.org/module/4075
  3. immutable.js 와 같은 라이브러리를 이용하는 것을 추천합니다.

힌트

아래와 같이 사용할 수 있는 모드 전환 제어 버튼을 만들어보세요.

<Control
    onChangeMode={function(mode) {
        setMode(mode);
    }}
/>

위의 코드는 아래의 내용을 article 영역에 추가합니다.

<ul>
  <li>
    <input
      type="button"
      value="create"
      onClick={function() {
        // todo
      }}
    />
  </li>
</ul>




<Create
    onCreate={function(data) {
      data.id = nextId;
      setTopics([...topics, data]);
      setSelectedId(nextId);
      setMode("READ");
      setNextId(nextId + 1);
    }}
  />

위의 코드는 아래와 같은 코드를 실행시킵니다.

<article>
  <h1>Create</h1>
  <form
    action="topics"
    method="post"
    onSubmit={function(e) {
      // todo
    }}
  >
    <p>
      <input type="text" name="title" placeholder="title" />
    </p>
    <p>
      <textarea name="description" placeholder="description" />
    </p>
    <p>
      <input type="submit" />
    </p>
  </form>
</article>

결과

step 6

목표

수정 기능을 추가하고 싶습니다.

알아야 할 것

  • 폼을 수정할 때는 onChage 이벤트를 통해서 state 값을 수정하고, 수정된 state값이 value에 반영될 수 있도록 처리해야 합니다.
var [title, setTitle] = useState(props.data.title);

<input
    type="text"
    name="title"
    placeholder="title"
    value={title}
    onChange={function(e) {
      setTitle(e.target.value);
    }}
/>

힌트

아래의 코드는

<Update
        data={selectedTopic}
        onUpdate={function(data) {
          console.log("update");
          var newTopics = [...topics];
          for (var i = 0; i < newTopics.length; i++) {
            console.log(newTopics[i].id, data.id);
            if (newTopics[i].id === data.id) {
              newTopics[i].title = data.title;
              newTopics[i].description = data.description;
              break;
            }
          }
          setTopics(newTopics);
          setMode("READ");
        }}
      />
    );

아래의 UI를 만들어냅니다.

    <article>
      <h1>Update</h1>
      <form
        action="topics"
        method="put"
        onSubmit={function(e) {
          todo
        }}
      >
        <p>
          <input
            type="text"
            name="title"
            placeholder="title"
            value={title}
            onChange={function(e) {
              todo
            }}
          />
        </p>
        <p>
          <textarea
            name="description"
            placeholder="description"
            value={description}
            onChange={function(e) {
              todo
            }}
          />
        </p>
        <p>
          <input type="submit" />
        </p>
      </form>
    </article>

결과

step 7

목표

삭제를 구현하고 싶습니다.

결과

step 8

목표

코드가 너무 많아졌습니다. 코드를 파일로 분리해서 정리 정돈하고 싶습니다.

결과

step 9 - ajax

이번 임무는 step8을 선행학습으로 하고 있습니다

목표

ajax를 이용해서 리로드 없이 동적으로 데이터를 변경하고 싶습니다.

알아야 할 것

useEffect - 사이드 이팩트란 무엇인가? react 에서 ajax 통신하는 방법 .env.development.template => .env.development 로 변경해서 서버와 통신 할 REACT_APP_API_URL 값을 셋팅해줘야 한다.

결과

step 9 - route

이번 임무는 step8을 선행학습으로 하고 있습니다

목표

UI에 따라서 페이지 리로딩 없이 URL이 변경되고, URL에 따라서 적당한 정보가 표시되도록 개선하고 싶습니다.

알아야 할 것

  • history.pushState를 이용해서 URL을 변경하는 방법

결과

step 10 - route

목표

step 9 - route 에서 구현한 내용을 react-route-dom을 이용해서 개선하고 싶습니다.

알아야할 것

  • react-route-dom을 이용하는 방법
  • react-route-dom을 이용해서 if 문을 없애고, 보다 단순하게 코드를 제어할 수 있게 됨을 공감

참고

결과

Clone this wiki locally