[Wecode 25일차] 리액트 CRUD 연습 & 버전관리

1. 리액트 CRUD를 연습하면서, List 형태 뿌리는 방법

     1) 원페이지에 state와 ul, li를 가지고 뿌린다.

    2) state를 관리하는 페이지와 ul부분을 컴포넌트로 가져와서 뿌린다(list 부분 따로 컴포넌트 제작)

    3) 원페이지에 state와 ul까지 존재하고 map쓰고 return 하는 부분만 컴포넌트로 만들어서 가져온다(현업에서 많이 사용)

import React from 'react';
import Button from '../button'

const ItemList =(props)=> {
        console.log(props)
        return(            
            <>
             <li>{props.inputValue}</li>
             <Button btnName="수정" handleClick={(e)=>props.handleUpdateClick(props.index)}/>
             <Button btnName="삭제" handleClick={(e)=>props.handleDeleteClick(props.index)}/>            
            </>
        )
    
}

export default ItemList;

     위에서 props로 인덱스, 이벤트, li에 들어가는 값을 넘겼는데..

 //app.js   
     <ul>
        {
            this.state.list.map((item,index) => {
            return (            
                <List index={index} //빼먹었음..
                      inputValue={item.inputValue} 
                      handleUpdateClick={this.handleUpdateClick} 
                      handleDeleteClick={this.handleDeleteClick}/>            
            )            
          }) 
        }
      </ul>

리스트 컴포넌트에서 index를 빼먹으니, 수정버튼 누르면 계속 null 값이 되었다.

아래는 전체 코드.

import React,{Component} from 'react';
import Button from './components/button';
import Input from './components/input';
import List from './components/list';

class App extends Component{
  state={
    list :[],
    inputValue : "",
    isUpdate : false,
  }

  handleChange =(e)=>{
    console.log(e.target.value)
    this.setState({
      inputValue : e.target.value
    })
  }
  //추가
  handleClick =(e)=>{
    console.log("추가")
    //state값을 수정.
    const Item = {
      inputValue : this.state.inputValue,
    }
    const Itemlist = [Item, ...this.state.list];

    this.setState({
      list : Itemlist,
      inputValue : ''
    })
  }
  //삭제
  handleDeleteClick=(index)=>{
    console.log("삭제")
    const delItem = [...this.state.list];
    delItem.splice(index,1);
    this.setState({
      list : delItem
    })
    }
  //수정
  handleUpdateClick=(index)=>{
    console.log(this)
    console.log(index)
    this.setState({
      inputValue : this.state.list[index].inputValue,
      isUpdate : true,
      index : index,
    })
  }  

  handleAfterUpdateClick = (e)=> {
    console.log("수정 후 클릭")
    let updateItem = [...this.state.list];
    updateItem[this.state.index].inputValue = this.state.inputValue;
    
    this.setState({
      isUpdate:false,
      list : updateItem,
      inputValue : ""
    })
  }

  render(){
    return(
      <>
      <Input handleChange={this.handleChange} value={this.state.inputValue}/>
      <Button btnName={!this.state.isUpdate ? "추가": "수정"} handleClick={!this.state.isUpdate ? this.handleClick : this.handleAfterUpdateClick}/>
      <ul>
        {
            this.state.list.map((item,index) => {
            return (            
                <List index={index} 
                      inputValue={item.inputValue} 
                      handleUpdateClick={this.handleUpdateClick} 
                      handleDeleteClick={this.handleDeleteClick}/>            
            )            
          }) 
        }
      </ul>
      </>
    )
  }
}

export default App;

2. 현업에서 Git버전 관리방법에 대해서 물어보니, 방법은 여러개라고 말씀하시며, 통상 git tag를 많이 이용하신다고 하셨다.

    1) git commit으로 관리

    2) 파일만들어서 폴더로 구분하여, git으로 관리

    3) 브랜치 이용하는 방법

    4) git tag활용

  3.현업에서 Sass 사용하는법

     기업협업하시는 1기분께 여쭤봤다. 현업에서 Sass 어떤식으로 사용하는지.

     1) 중첩기능 활용해서, 구조화하여 사용

     2) 회사 고유의 폰트, 색상, 특징이 있는 css 부분은 $변수로 저장해서 활용

     3) 공통된 부분은 style 폴더를 만들고 scss 파일 만든 후 import해서 사용.  

     4) flex로 페이지 비율 나눌때 몇 등분에 따라 값을 %로 지정함.