차근차근 배움터

this 예약어가 메소드 안에서 올바르게 작동하도록 지난 강의에서처럼, bind()를 통해 바인딩을 해준다 ※ bind() 의 역할은 ? 하지만 이렇게 하게 된다면 무한 루프가 만들어지게 됩니다 componentDidUpdate()가 이 컴포넌트가 변경될 때마다 실행되기 때문이죠 상태를 설정하면, 컴포넌트가 변경됩니다 따라서 함수가 재실행되고 그러면 상태 역시 다시 변경됩니다 이렇게 계속 실행되면 그 것이 무한 루프인 것이죠 이를 위해 componentDidUpdate()는 우리를 도와줄 두 개의 인자를 전달받습니다 각각 prevProps, 그리고 prevState입니다 즉 현재 컴포넌트의 갱신 직전 시점의 props와 스냅샷을 갖고 있는 인자입니다 그리고 이를 가지고 prevState.searchTer..

앞서 언급했는데, 클래스 컴포넌트에서는 리액트 훅을 사용할 수 없기 때문에 useEffect()를 사용할 수 없습니다 하지만 클래스 컴포넌트는 컴포넌트 생명 주기라는 개념이 존재합니다 좀 더 정확히 말해서, 모든 컴포넌트는 생명 주기를 가집니다 예를 들어서, DOM에 렌더링되거나 DOM에서 삭제될 때 말이죠, 하지만 특정 메소드를 통해 생명 주기가 다른 2개의 클래스 컴포넌트를 서로 다른 시점에서 추가할 수 있습니다. 모든 effect 함수는 컴포넌트가 처음 마운트될 때 실행됩니다 하지만 의존성이 없다면 즉 의존성 배열이 비어있다면 effect 함수는 이럴 때 딱 한 번만 실행됩니다 componentWillUnmount()는 컴포넌트가 DOM에서 삭제되기 직전에 호출되며 이 것은 useEffect()에 ..

기술적으로는 가능하지만 올바르게 작동하지 않을 수 있기 때문에 클래스 컴포넌트에서는 render() 메소드 안에 함수를 추가하지 않는다. 대신에, 이건 클래스기 때문에 클래스 전체를 그룹화해서 내부의 기능을 그룹화할 수 있다. 이제 메소드는 만들었는데, 상태가 없군요 예전에는 클래스 컴포넌트의 상태 관리 방법이 지금과는 완전히 달랐다 지금은 상태 관리를 위해서 useState를 사용하지만 버전이 업데이트 되면서 useState와 같은 hook이 생기기 이전에는 상태를 사용할 필요가 생기면 항상 클래스 컴포넌트를 만들어야 했죠 그리고 기본적으로 2가지 작업을 해야 했다 "초기화(initialize)" 와 "상태 정의(defining the state)" 이다 초기화는 useState 첫 호출시 하는 것과 ..

render() 메소드는 리액트에 필요한 특정 메소드로 리액트가 jsx 코드 안에 컴포넌트가 사용된 것을 확인하면 그때 호출하는 메소드이다 따라서, render() 메소드는 함수형 컴포넌트에서의 반환 문장과 동일하다 여기서 한 가지 다른 점은 props의 유무이다. 클래스형 컴포넌트를 사용할 때는 props를 함수형 처럼 받을 수 없기 때문에 우리는 먼저 Component 를 'react'에서 import 하는 것이 필요하다 그리고 User class에 extends Component 를 작성해준다 이것은 자바스크립트의 내장 기능이라고 볼 수 있다 extends로 확장했기 때문에 이제 props 대신 this.props 를 넣어서 name에 접근할 수 있다 이 this는 컴포넌트로 받은 모든 props를..

리액트 16.8 이후부터 변화가 시작되었다 클래스 컴포넌트는 useState, useEffect와 같은 리액트 훅을 사용할 수 없다!

섹션13. 컴포넌트를 구축하는 다른 방법: 클래스 컴포넌트 컴포넌트를 빌드하는 다른 방법이 있다! 클래스를 이용한 컴포넌트 빌드이다. 최근의 리액트 프로젝트에서는 거의 이 방법을 사용하지 않을 것입니다 하지만 이 방법을 사용했던 프로젝트들이 많을 수 있기 때문에 설명한다.

모듈 리소스 여러분들은 여러분들의 코드를 제 코드와 비교해보고 싶을 수 있습니다 (예: 에러 찾기 + 수정). 그것을 위해, 여러분은 이 모듈의 여러 코드 스냅샷을 이 Github 저장소에서 찾을 수 있습니다 https://github.com/academind/react-complete-guide-code/tree/12-a-look-behind-the-scenes 사용 지침은 이 링크로 연결되는 페이지에서 찾을 수 있습니다. /code 폴더에서 스냅샷을 고르시면 됩니다 - 하위 폴더 이름은 이 코스 섹션의 강의 이름과 쉽게 일치하도록 설정되었습니다. 여러분은 또한 해당 Github 저장소에서 섹션 슬라이드 (사용 가능한 경우) 를 찾을 수 있습니다.

useMemo를 useCallback보다 덜 자주 쓰게 될 것이다 데이터를 기억하는 것이 더 ※ useMemo를 이용하여 데이터를 저장하면 이는 메모리를 사용하는 것이다. 그렇다면 useMemo와 useCallback의 차이는.....? useMemo: useMemo는 계산 비용이 큰 함수의 결과 값을 메모이제이션하는 데 사용됩니다. useMemo(callback, dependencies) 형태로 사용되며, callback 함수를 실행한 결과 값을 기억합니다. dependencies 배열은 useMemo의 재계산을 트리거하는 의존성 목록입니다. 의존성이 변경되지 않는 한 이전에 계산한 결과를 재사용합니다. useMemo는 불필요한 계산을 방지하고 성능을 향상시킬 수 있습니다. 주로 계산 비용이 많이 드는..

리액트가 상태에 대한 갱신을 어떻게 하는 지 Scheduled State Change 상태 갱신 예약 즉 동시에 여러 번의 갱신이 스케줄될 수 있으므로 상태를 갱신할 때는 함수 형태를 이용해서 갱신하는 것을 추천한다 이전 상태의 스냅샷에 의존해야 하는 경우는 특히 그렇다 함수 형태를 사용해야 리액트가 미완료된 상태 변경 작업에 대하여 최신의 상태를 사용하고 컴포넌트가 재 렌더링되었을 그 시점의 상태를 사용하지 않게 된다 컴포넌트가 재 렌더링되었을 때의 시점과 상태 변경이 예약되는 시점의 차이를 아는 것은 매우 중요하다 이렇게 함수를 호출한다고 이 바로 다음 행에서 상태가 갱신되는 것은 아니라고 이미 배웠다 상태는 이 위치에서 갱신되지 않고 갱신 예악이 된 뒤 컴포넌트가 다시 실행된다 이 경우에 컴포넌트가..

DOM에 컴포넌트가 연결되고 유지되는 동안에는 useState 상태는 최초의 초기화 이후에는 갱신만 된다 강의 대본 명백한 이야기지만 리액트에서 상태란 가장 중요한 개념입니다 이 상태라는 것은 컴포넌트를 다시 렌더링하고 화면에 표시되는 것들을 바꿉니다 따라서, 컴포넌트와 이 상태와의 상호작용은 리액트의 핵심적인 개념이죠 물론 이 둘 모두 리액트가 관리한다는 것에 주목할 필요가 있습니다 이러한 컴포넌트의 개념은 리액트 라이브러리에서 나왔으며 리액트는 이 컴포넌트와 연결된 상태도 함께 처리합니다 useState 후크를 이용하는 게 그 예입니다 이런 방식을 통해 컴포넌트와 상태간의 상호 작용을 처리합니다 말이 나와서 말인데 가장 일반적인 형태의 상태 관리는 useState 후크를 사용하는 것입니다 이를 이용하..