React Hooks: 소개

이전 , 나는 React Lifecycle 의 개념과 그 방법을 소개했습니다. 우리는 이러한 방법을 사용하여 DOM에 구성 요소를 마운트 및 마운트 해제하는 것을 묘사합니다. 수명 주기 방법이 이 목표를 달성하는 데 큰 역할을 하지만 훨씬 더 새롭고 효율적인 방법이 있습니다.

이 방법론을 "후크"라고 합니다. 후크 이전에는 개발자가 클래스 구성 요소를 사용하여 수명 주기를 묘사해야 했습니다. 후크를 구현하면 이제 기능적 구성 요소를 사용할 수 있습니다.

후크는 무엇입니까?

간단히 말해서, Hooks는 일반 JavaScript 함수입니다.

대신 Hooks를 사용하는 이유는 무엇입니까?

두 가지 방법론이 모두 사용되고 수용되기 때문에 클래스 구성 요소를 사용하는 것에서 후크로 전환하는 강력한 규칙이 없습니다.

그러나 개인적인 관점에서 볼 때 몇 가지 이점이 있습니다. 코드를 DRY하려는 지속적인 시도에서 후크는 다음과 같은 이유로 도움이 됩니다.

후크를 사용하면 상태 및 기타 동작을 재사용할 수 있습니다.

후크에는 상용구 코드가 덜 필요합니다.

후크는 기능적 구성 요소를 더 작고 강력한 조각으로 나눕니다.

후크를 사용하면 클래스 구문을 사용하지 않고 React 구성 요소에서 상태를 사용할 수 있습니다.

몇 가지 코드를 살펴보겠습니다.

일부 반응 후크

사용 상태()

React는 컴포넌트 내에서 초기 상태를 선언하는 새로운 방법을 제공합니다.

function Categories(props){
    const [categories, setCategories] = useState([])
}

여기에서 소멸된 변수를 선언하고 useState() 값으로 설정합니다. 변수의 첫 번째 개체는 컬렉션의 이름입니다. 변수의 두 번째 객체는 결국 첫 번째 객체의 상태를 추가로 업데이트하는 데 사용할 함수입니다.

**이 대괄호를 활용하는 프로세스는 배열 구조화라는 JavaScript 구문입니다. 동시에 두 개의 새로운 변수를 선언할 수 있습니다. 배열 및 객체 구조화에 대한 자세한 내용은 내 게시물을 참조하세요. **

그런 다음 구성 요소의 수명 주기 동안 상태를 업데이트할 계획이므로 빈 배열을 useState()에 전달합니다. useState()는 'null', '0', 'false', '33'과 같은 매개변수를 사용할 수 있습니다. 객체일 필요는 없습니다!

구성 요소 상단에 있는 이 초기 코드는 다음을 사용하는 것과 비슷합니다.

this.state = {}

그리고

this.setState({})

클래스 구성 요소에서. 우리가 이미 알 수 있듯이, 우리의 기능적 구성 요소는 코드를 축소하고 건조시킵니다.. 많이!

사용 효과()

이 다음 React 후크를 사용하면 데이터를 가져오고 DOM을 수정할 수 있습니다. useEffect()는 중요한 것은 컴포넌트가 살아있을 때 상태를 유지하고 업데이트하기 위해 useState()에서 선언한 함수를 담고 있다는 것입니다. 다음은 예입니다.

function Categories(props){
    const [categories, setCategories] = useState([])

    useEffect(() => {
        fetch(`http://localhost:3000/categories`)
        .then(response => response.json())
        .then(json => {
            setCategories(json.data)
         })
    }, [])
}

위의 코드에서 일어나는 일은 다음과 같습니다.

초기 상태는 useState()를 사용하여 설정되고 "카테고리"에 빈 배열로 저장됩니다.

API에 fetch GET 요청을 하는 useEffect()가 호출됩니다.

렌더링된 데이터는 json으로 전달됩니다.

setCategories()가 호출되어 상태를 업데이트하는 동안 데이터를 저장합니다.

이제 범주 컬렉션이 업데이트되어 더 이상 빈 배열이 아닙니다.

구성 요소 수명 주기의 이 순간에 "console.log(categories)"는 다음과 같이 표시됩니다.

{
  "bookmarks": [
    "{attributes: {…}, id: \"2\", relationships: {…}, type…}",
    "{attributes: {…}, id: \"1\", relationships: {…}, type…}"
  ]
}

요약

기능 구성 요소는 이제 후크로 인해 상태를 조작할 수 있습니다.

Hooks를 사용하는 기능적 구성 요소는 많은 상용구 코드 없이 구성 요소 수명 주기를 거칩니다.

Hooks를 사용하는 기능적 구성 요소는 재사용 가능한 동작을 허용합니다.

Lifecycle Class Method와 Lifecycle Functional Hook 중 하나를 결정할 때 "더 나은"선택은 없습니다. 코드에 가장 적합한 작업을 수행하십시오.

상태는 항상 변경될 수 있습니다. DOM이 이러한 변경 사항을 표시하는지 확인하십시오.

✨ 읽어주셔서 감사합니다✨
✨ 아래에 댓글을 남겨주세요 + 대화를 계속합시다 ✨
✨ 질문 좀 해주세요 :) ✨