React와 연결하기

React에는 기능을 구현하는 많은 방법이 있습니다. Flatiron School 커리큘럼에서 우리는 처음에 각 구성 요소를 JS ES6 클래스로 빌드하고 상태를 초기화하고 생성자를 사용하고 componentDidMount() 및 componentDidUnmount()와 같은 구성 요소 수명 주기 메서드를 활용하는 방법을 배웠습니다.

이름에서 알 수 있듯이 이러한 수명 주기 메서드는 구성 요소가 DOM으로 렌더링될 때와 렌더링된 구성 요소가 DOM에서 제거될 때 실행됩니다.

기능 구성 요소를 입력합니다.

기능 구성 요소는 호출될 때 구성 요소가 DOM에서 반환하도록 지시한 HTML을 렌더링한다는 점에서 클래스 구성 요소와 유사합니다. 그러나 ES6 클래스가 없으면 상태를 사용하여 새 인스턴스를 구성할 수 없으며 클래스 컨텍스트 내에서 전능한 "this"키워드에 대한 액세스 권한을 잃게 됩니다.

그러나 기능적 구성 요소는 JS 클로저와 함께 제공되는 멋진 어휘 범위를 최대한 활용합니다!

그렇다면 어떻게 수명 주기 방법을 모방하고 기능 구성 요소 범위 내에서 저장소(Redux를 사용하는 경우)에 액세스할 수 있습니까?

React 후크를 입력합니다.

후크는 위협적으로 들리지만 단순히 기능 구성 요소에서 호출할 수 있는 기능입니다. 후크는 React 문서에 따르면 단순히 "기능 구성 요소에서 React 상태 및 수명 주기 기능에 "연결"할 수 있도록 하는 기능입니다.

사용법을 안내하는 몇 가지 다른 규칙이 있습니다.

클래스에 초기 상태가 부여되고 수명 주기 메서드가 정의되어 있으므로 클래스 구성 요소에서 후크를 사용할 필요가 없습니다.

후크는 기능 구성 요소의 최상위 수준에서만 호출되어야 합니다. 조건부, 루프 또는 중첩 함수 내에서 후크를 사용하는 것은 부적절합니다. 이 지침을 준수하면 후크가 체계적으로 호출되어 신뢰할 수 있고 예측 가능하게 됩니다.

단일 구성 요소 내에서 동일한 후크를 여러 개 사용할 수 있습니다.

예를 들어 Redux를 사용 중이고 다른 상태 영역에 액세스해야 하는 경우 useSelector()(React-Redux와 함께 제공되는 사용자 지정 후크) 후크를 여러 번 재사용하여 반환 값을 변수에 할당할 수 있습니다.

const posts = useSelector((state) => state.posts) 
// retrieves what is stored in state.posts and makes it available // in posts.
const comments = useSelector((state) => state.comments)
// both posts and comments are accessible in their respective
// variables within the scope of this functional component

useState() 후크를 사용하면 setter 및 getter를 선언할 수 있을 뿐만 아니라 기능 구성 요소 내에서 로컬로 사용하기 위해 주어진 변수로 상태를 초기화할 수 있습니다. 조건부로 렌더링되는 기능을 구현하려는 경우 매우 편리합니다.

const [showForm, setShowForm] = useState(false)

이 예에서는 초기 상태 값을 전달합니다.

` false useState 후크에. 이제 false 값이 유지되고 showForm 변수를 호출하여 액세스할 수 있습니다. "setShowForm(!showForm)"은 구성 요소 내에서 로컬로 상태 변경을 모방하여 showForm의 값을 설정합니다.

function Post(props){
const [showForm, setShowForm] = useState(false)

return(
<button onClick{() => setShowForm(!showForm)}> Show Form </button>
{ showForm ? <Commentform id={props.id} /> : showForm}
)

}

이 예에서는 useState() 후크를 사용하여 부울을 설정합니다. Post 함수는 showForm 변수의 새 값을 설정하기 위해 useState()에 의해 생성된 setShowForm 함수를 호출하는 onClick 이벤트 핸들러로 버튼을 렌더링합니다. 여기서는 부울을 토글합니다. 마지막으로 버튼 아래의 JSX에서 삼항 연산자를 사용하여 showForm 변수의 값을 확인하고 있습니다. showForm이 true를 반환하면 Post() 함수가 호출될 때 전달된 소품을 전달하는 주석 버튼을 렌더링합니다. 그렇지 않으면 잘못된 값을 반환하고 주석 양식이 렌더링되지 않습니다.

React는 사용자 정의 후크를 작성할 수도 있습니다! 이러한 강력한 도구는 매우 유용할 뿐만 아니라 끝없이 사용자 지정할 수 있습니다.

후크를 사용하면 기능적 구성 요소가 클래스 구성 요소처럼 작동하도록 만들 수 있습니다!