Skip to content

React

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

step0

소스

https://kdt-gitlab.elice.io/Teacher/react-steps/-/commit/8a8c4c05a2bee99c7f3b48cb3578d95042ef9cd7

실습

https://stackblitz.com/edit/react-step-0

성취

리액트를 실행할 수 있게 되었습니다.

불만족

header, nav, article 태그가 너무 복잡합니다.

도약

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

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

step1

소스

https://kdt-gitlab.elice.io/Teacher/react-steps/-/commit/51ce11f02e5d1d1694ba4db22e21d96b27ad3fdf

실습

https://stackblitz.com/edit/react-step-1

성취

리액트를 실행할 수 있게 되었습니다.

불만족

header, nav, article 태그가 너무 복잡합니다.

도약

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

다음작업

https://stackblitz.com/edit/react-step-2?file=README.md

step 2

소스

https://kdt-gitlab.elice.io/Teacher/react-steps/-/commit/a91065184c004d0c3776f23546538d01e98146ef

실습

https://stackblitz.com/edit/react-step-2

성취

컴포넌트를 만들 수 있게 되었습니다.

불만족

컴포넌트가 너무 경직 되어 있습니다. 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 3

소스

https://kdt-gitlab.elice.io/Teacher/react-steps/-/commit/e4c77e955799bd1ae873690ffcc9d7a728aab68b

실습

https://stackblitz.com/edit/react-step-3

알아야 할 것

모든 컴포넌트는 props를 통해서만 데이터를 입력 받을 수 있습니다. 데이터의 흐름은 상위 컴포넌트에서 하위 컴포넌트를 통해서만 흐르밉니다. 이를 통해서 애플리케이션의 복잡도를 낮출 수 있습니다. 아래의 그림에서 props 부분을 이해해야 합니다.

성취

재사용 가능하고, 커스터마이징 가능한 컴포넌트를 만들었습니다. 컴포넌트 함수의 파리미터(props)의 용법을 알게 되었습니다.

불만족

HTML 태그 처럼 컴포넌트에도 이벤트를 설치해서 컴포넌트에서 발생하는 일에 따라서 자동화된 처리를 하고 싶습니다.

도약

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

<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 4

소스

https://kdt-gitlab.elice.io/Teacher/react-steps/-/commit/ae3f98bc9e2e4d2a90058c483530b32f12433768

실습

https://stackblitz.com/edit/react-step-4

알아야 할 것

  1. 컴포넌트의 사용자가 이벤트 핸들러를 설치해서 컴포넌트와 상호작용 할 수 있도록 하는 방법을 이해해야 합니다.
  2. 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달 할 때는 props를 사용합니다. 자식 컴포넌트가 부모 컴포넌트를 변경해야 하는 경우는 props를 통해서 전달한 이벤트 핸들러 함수를 호출하는 것으로 처리 합니다.
  3. 아래의 그림에서 props와 state의 관계를 이해할 수 있어야 합니다.

성취

컴포넌트에 이벤트를 설치해서 상호작용하는 방법을 알았습니다.

불만족

쓰기 기능을 구현하고 싶습니다.

도약

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

<control onChangeMode={function(mode){
  // create, update, delete와 관련된 처리
}}></control>

step 5

소스

https://kdt-gitlab.elice.io/Teacher/react-steps/-/commit/251d88a7643cad924876e4c0c81e26c022ebdb89

실습

https://stackblitz.com/edit/react-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 와 같은 라이브러리를 이용하는 것을 추천합니다.

성취

리액트에서 데이터를 다루는 방법을 알게 되었습니다.

불만족

읽기 기능을 구현하고 싶습니다.

도약

읽기 기능을 구현하세요.

step 6

소스

https://kdt-gitlab.elice.io/Teacher/react-steps/-/commit/374950f1f16ed83fa157a69a7884fa2fb33958cb

실습

https://stackblitz.com/edit/react-step-6

알아야 할 것

  1. 데이터를 변경할 때는 복제를 한 후에 처리를 하면 비교적 쉽게 수정할 수 있습니다.

성취

CRUD의 꽃이라고 할 수 있는 수정 기능을 구현할 수 있게 되었습니다.

불만족

이왕 여기까지 온 것 삭제까지는 가야죠.

도약

삭제 기능을 구현해보세요.

step 7

소스

https://kdt-gitlab.elice.io/Teacher/react-steps/-/commit/8b31c2b0f5ab8d68e8d9c57ff65d27a5f71849ae

실습

https://stackblitz.com/edit/react-step-7

성취

CRUD를 모두 구현할 수 있게 되었습니다!

Clone this wiki locally