React
https://kdt-gitlab.elice.io/Teacher/react-steps/-/commit/8a8c4c05a2bee99c7f3b48cb3578d95042ef9cd7
https://stackblitz.com/edit/react-step-0
리액트를 실행할 수 있게 되었습니다.
header, nav, article 태그가 너무 복잡합니다.
각 태그를 Header, Nav, Article 라는 이름의 컴포넌트로 만들어서 단순화 해보세요.
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
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="본문" />
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 영역에 노출됩니다.
}}>
https://kdt-gitlab.elice.io/Teacher/react-steps/-/commit/ae3f98bc9e2e4d2a90058c483530b32f12433768
https://stackblitz.com/edit/react-step-4
- 컴포넌트의 사용자가 이벤트 핸들러를 설치해서 컴포넌트와 상호작용 할 수 있도록 하는 방법을 이해해야 합니다.
- 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달 할 때는 props를 사용합니다. 자식 컴포넌트가 부모 컴포넌트를 변경해야 하는 경우는 props를 통해서 전달한 이벤트 핸들러 함수를 호출하는 것으로 처리 합니다.
- 아래의 그림에서 props와 state의 관계를 이해할 수 있어야 합니다.
컴포넌트에 이벤트를 설치해서 상호작용하는 방법을 알았습니다.
쓰기 기능을 구현하고 싶습니다.
아래와 같은 인터페이스를 가지고 있는 컴포넌트를 만들어보세요.
<control onChangeMode={function(mode){
// create, update, delete와 관련된 처리
}}></control>