리액트로 간단한 컴포넌트 만들어보기

첫번째로 Todo 컴포넌트를 만들어볼것이다.

간단한 체크박스와 라벨을 랜더링하는 컴포넌트다.

src디렉터리 아래에 Todo.js파일을 생성하자

 저는 따로 js파일을들을 모아주기위한 js 폴더를 만들었어요!

import React from 'react';

class Todo extends React.Component{
    render(){
        return (
            <div className = "Todo">
                <input type = "checkbox" id="todo0" name="todo0" value="todo0"></input>
                <label for="todo0">Todo 컴포넌트 테스트</label>
            </div>
        );
    }
}
export default Todo;

현재 인덱스.js는 app컴포넌트가 렌더링 되고있다. 

따라서 Todo컴포넌트를 화면에 출력하려면 App컴포넌트의 render함수에 Todo컴포넌트를 추가해야한다.

import logo from './logo.svg';
import './App.css';
import Todo from './js/Todo';
import React from 'react';


//function App() {
class App extends React.Component{
  render(){
    return(
      <div className="App">
        <Todo/>
    </div>
    );
  }
}
    

 

export default App;

를 추가해주자 첫번째로 상단에서 Todo컴포넌트를 import한다. 그리고 div내부에 Todo컴포넌트를 추가한다.

이때 기존의 글들은 모두 삭제해 주었어요 ! 간단하게 테스트할겸해서요 !

바뀐 부분을 실행시켜 보면 아래와 같아져요!

그럼 해당 체크박스 컴포넌트가 생성되어요

체크박스를 더추가하고싶다면 이제 <Todo/>를 계속 추가해주면된당

---

이제 Todo 리스트에 대해 계속 똑같은 것이 출력될수는 없습니다.

계속 컴포넌트 테스트 이렇게 같은 글만 주구장창...안됩니다 ㅠㅠ

그래서 Todo컴포넌트에 title을 매개변수로 넘겨겨야 하고 title과 더불어 필요한 매개변수들을 생성자를

통해 넘겨보도록 해봅시다.!!

앞에서 단순하게 글을 넘겼다면 지금은 파라미터로 넘겨야 하기때문에 app쪽에서 우선

생성자를 생성해봅시다.

  constructor(props){
    super(props);
    this.state={
        item : [
          { id : 123, title : "hello world 1", done:true },
          { id : 333, title : "hello world 2", done:true },
        ]
    };

위처럼 생성해줍시다. 그럼 지금 items에는 2개의 맵형태가 있습니다. 키값은 id, 밸류값은 해당 값으로!

그럼 Todo.js 에서는 해당 값들을 상속받아 데이터들을 정제하도록 해줍시다.

import React from 'react';

class Todo extends React.Component{
constructor(props){
    super(props);
    this.state={ item:props.item};
}

    render(){
        return (
            <div className = "Todo">
                <input
                    type = "checkbox" 
                    id={this.state.item.id}
                    name={this.state.item.id}
                    value={this.state.item.done}/>
                <label id={this.state.item.id}> {this.state.item.title}! {this.state.item.id} </label>
            </div>
        );
    }
}
export default Todo;

여기서도 생성자를 이용했지만 상속을 받아 그 값들을 전부 가져오도록 했습니다.

그리고 렌더 부분에서 해당 아이템의 키값들로 정보들을 채워넣어주었습니다

그럼 해당 App에서는 Todo를 어떻게 가져올까요?

그전에 그렇게 가져올수 있도록

  render(){
    var todoItems = this.state.items.map((item, idx)=>(
      <Todo item={item} key = {item.id}/>
    ));
    return <div className="App">{todoItems}</div>;
  }

추가해 줍시다. ! 자바스크립트가 제공하는 map함수를 이용해서 배열을 반복해 컴포넌트를 생성하게 되는겁니다

그럼 리턴값으로!

와같이 생성됩니다.!! 지금은 수동으로 넣었지만 이 컴포넌트만으로 계쏙 데이터 추가작업없이 

데이터만있으면 자동으로 생성될 수 있습니다!

---

material ui를 이용한 디자인

material ui 패키지를 이용해 UI를 변경해봅시다!

Todo.js에 밑을 추가해주세요!!

import { ListItem, ListItemText, InputBase, checkbox} from "@material-ui/core";

import React from 'react';
import { ListItem, ListItemText, InputBase, Checkbox} from "@material-ui/core";

class Todo extends React.Component{
    constructor(props) {
        super(props);
        this.state = { item: props.item};
      }

    render(){
        const item = this.state.item;
        return (
            <ListItem>
                <Checkbox checked={item.done}/>
                <ListItemText>
                <InputBase
                inputProps={{ "aria-label":"naked"}}
                    type = "text" 
                    id={item.id}
                    name={item.id}
                    value={item.title}
                    multiline={true}
                    fullWidth={true}
                />
                </ListItemText>
            </ListItem>
        );
    }
}
export default Todo;

import React from 'react';
import Todo from './js/Todo';
import { Paper, List } from '@material-ui/core';
import './App.css';

class App extends React.Component{
  constructor(props){
    super(props);
    this.state={
        items : [
          { id : "unoKim", title : "안녕하세요 반갑습니다!!", done:true },
          { id : "gdHong", title : "날씨가 춥습니다. 감기조심하세요!", done:false },
        ],
    };
}
render() {
  var todoItems = this.state.items.length > 0 && (
    <Paper style={{ margin: 16 }}>
      <List>
        {this.state.items.map((item, idx) => (
          <Todo item={item} key={item.id} />
        ))}
      </List>
    </Paper>
  );
    return <div className="App">{todoItems}</div>;
  }
}
    

 

export default App;

한시간넘게 오류를 찾아도 뭐가 틀렸는지 도저히 못찾겠다.

리액트 고장으로 프로젝트는 여기까진인가;;

가 !! 아니고 

뭔가 다시 되었다.

원인 : 다음글에..

여차저차 되었다... 2시간동안 눈빠지게 왜틀렸는지 도 모른체 글짜만 계속쳐다보았다... 이래서 뭔가 프론트엔드는

어렵다...