차근차근 배움터

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

컴포넌트 안에서 오류가 발생하고 이를 처리할 수 없는 상황이라고 가정해보죠 이 users 컴포넌트에서 오류를 해결하지 않고 부모 컴포넌트에서 처리하고 싶다면 try-cache 문은 사용할 수 없습니다 이 문장은 정규 자바스크립트 문장을 사용하는 곳에서만 쓸 수 있기 때문입니다 이럴 때 오류 경계(Error Boundary)라는 것을 사용한다. componentDidCatch() 생명 주기 메소드를 활용하는 컴포넌트입니다 componentDidCatch() 메소드는 어느 클래스 컴포넌트에도 추가할 수 있으며 컴포넌트에 이를 추가하게 되면 클래스 컴포넌트를 오류 경계로 만들게 됩니다 이 ‘오류 경계’란 단어는 이런 생명 주기 메소드를 갖는 컴포넌트를 지칭하는 용어입니다 2개의 함수형 컴포넌트를 편집할 수 없..

무조건 함수형 컴포넌트를 쓸 필요는 없다는 겁니다 클래스 형식이 좋다면 그걸 써도 돼요 하지만 함수형 컴포넌트의 장점이 충분히 있기 때문에, 클래스 컴포넌트는 무시하셔도 괜찮습니다. 단 하나의 예외가 있는데, 이는 나중에 설명드리겠습니다 어떤 방법을 써야 할지 잘 모르겠다면 그러니까 함수형, 또는 클래스 컴포넌트 중에 무엇을 써야 할지 결정할 수 없다면 지금 보시는 의사 결정 트리를 확인해보시기 바랍니다

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를..

아직도 애니메이션에 대해서 모른다는 것을 알고 바로 공부 빡! 물론 기초 강좌였다 alternate 왔다갔다 한다 normal 이 기본값이다 alternate-reverse 거꾸로 출발 (거꾸로 normal) linear는 가속도가 붙지 않은 경우이다. forwards 마지막에 위치한 자리에서 멈추겠다

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