Frontend/React (3) 썸네일형 리스트형 [React] 클래스 컴포넌트와 함수 컴포넌트 정리 클래스 컴포넌트 기존 리액트 16.8 버전 미만으로 작성된 코드로 클래스 컴포넌트가 대다수이다. 즉, React의 초기 버전부터 사용되어 온 전통적인 방식으로, 복잡한 상태관리와 생명주기 관리가 필요한 경우 유리할 수 있다. 생명주기 메소드(LifeCycle Method) : 컴포넌트가 브라우저상에 나타나고, 업데이트 되고, 없어지게 될 때, 또는 추가적으로 에러가 났을 때 호출되는 메소드들이다. 생명주기 메소드는 클래스 컴포넌트에서만 사용할 수 있고, 예를들어 componentDidMount(), componentDidUpdate(), componentWillUnmount(), render() 등이 있다. 클래스 컴포넌트를 알아야하는 이유 : 지금은 함수 컴포넌트 사용을 권장하기 때문에 알 필요 없다고.. [React] 프로젝트에 eslint 적용 시 발생한 이슈 이슈 원인 React 프로젝트에 처음으로 ESLint를 적용하던 중 생긴 오류로 화살표 함수로 생성된 함수형 컴포넌트에 발생한 오류 해결 방법 eslintrc 설정파일의 rules에 react/function-component-definition을 추가하여 함수형 컴포넌트의 정의 방식을 지정해주자. rules:{ 'react/function-component-definition':[2, {namedcomponents:'arrow-function'}] } 추가 이슈 init을 활용해 eslint 코드 컨벤션 설정하기 Parsing error: Unexpected token =eslint 해결하기 npm install eslint babel-eslint --save-dev module.exports = { .. [React] Hooks 기초 정리/가장 많이 쓰이는 hooks React Hook 정의 React의 Hook은 16.8 버전부터 새로 추가된 기능이다. Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수라고 하고, Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해주는 것이다. 현재는 React Hook이 없다면 React 프레임워크를 사용하는 의미가 없을 정도로 매우 중요하다고 볼 수 있다. React Hook 규칙 React Hook은 반복문, 조건문, 중첩된 함수내에서 호출하면 안됨. 이 규칙을 지키면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 훅이 호출되는 것이 보장된다. 일반적인 javascript.. 이전 1 다음
