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)}
>