class 컴포넌트에서 function 컴포넌트로

컴포넌트 자체를 바꾸기

• class 컴포넌트 extends Component ~ 지우기

  export default class App extends Component { ~
  🔽
  export default function App() { ~

render함수 없이 바로 return()

• class 컴포넌트는 render()안에 return()
• 함수형 컴포넌트는 render()없이 바로 return()

  render() {
      return ( ...내용 )
  }
  🔽
  return ( ...내용 )

[state바꾸기]

useState Hook을 이용해서 표현하기

• react에서 useState를 가져와서 사용한다.
  const [todoData, setTododata] = useState([])

• useState의 인수

  • todoData: 첫번째 인수/ 변수 이름
  • setTododata: 두번째 인수 state를 정하는 함수
  • useState([]): 처음에 나타낼 값

  state = {
    todoData: [
          {
              id: "1",
              title: "공부하기",
              completed: true
          },
          ... 
        ] 
     }
  🔽
  import { useState } from "react";
  
  const [todoData, setTododata] = useState([])
  const [value, setValue] = useState("")

this.state 바꾸기

this.state.todoData ===> todoData
this.state.value ===> value

handleClick = (id) => {
    let newTodoData = this.state.todoData.filter((data) => data.id !== id)
    this.setState({ todoData: newTodoData })
}
value={this.state.value}
🔽
const handleClick = (id) => {
  let newTodoData = todoData.filter((data) => data.id !== id)
  setTododata(newTodoData)
}
value={value}

state값 업데이트 1.

this.setState({value: ""}) ===> setValue("")

this.setState({ todoData: newTodoData })
this.setState({ value: e.target.value })
🔽
setTododata(newTodoData)
setValue(e.target.value)

state값 업데이트 2.

• Setter 이전 state를 가지고 오기 위해서 인수에 함수를 이용해 사용할 수 있다.
• 전개연산자로 객체를 추가하는 방식이였는데 인수에 함수를 이용한다.

  this.setState({ todoData: [...this.state.todoData, newTodo], value: "" }) 
  //전개연산자로 이미 들어있는 state이용
  🔽
  setTodoData(prev => [...prev, newTodo])
  setValue("")

함수 및 변수 정의 방법 변경

• 앞에 let, const 붙이기

  handleChange = (e) => {
      this.setState({ value: e.target.value })
  }
  🔽
  const handleChange = (e) => {
    setValue(e.target.value)
  }

정의된 함수 및 메소드 사용 방법 변경

• 함수명 앞에 있던 this. 을 빼준다.

   <input
      type="checkbox"
      onChange={() => this.handleCompleChange(data.id)}
      defaultChecked={data.completed}
  />{" "}
  {data.title}
  <button
      style={this.btnStyle}
      onClick={() => this.handleClick(data.id)}>
      x
  </button>
  🔽
  <input
    type="checkbox"
    defaultChecked={false}
    onChange={() => handleCompleteChange(data.id)}
  />
  {data.title}
  <button style={btnStyle}
    onClick={() => handleClick(data.id)}
  >