1. 컴포넌트가 생성될 때 : 1️⃣ constructor 2️⃣ getDerivedStateFromProps 3️⃣ render 4️⃣ componentDidMount 2. 컴포넌트의 Props가 변경될 때: 1️⃣ getDerivedStateFromProps 2️⃣ shouldComponentUpdate 3️⃣ render 4️⃣ getSnapshotBeforeUpdate 5️⃣ componentDidUpdate 3. 컴포넌트의 State가 변경될 때: 1️⃣ shouldComponentUpdate 2️⃣ render 3️⃣ getSnapshotBeforeUpdate 4️⃣ componentDidUpdate 4. 컴포넌트의 렌더링 중 에러가 발생할 때: 1️⃣ componentDidCatch 5. 컴..

1. constructor 함수 - 생성자 함수로서 클래스 컴포넌트에서 State를 사용하지 않아 State의 초깃값을 설정할 필요가 없을때는 생략 가능 ex) constructor(props: Props) { super(props); this.state = { counter: 0, }; } - 생성자 함수는 해당 클래스 컴포넌트가 생성될 때에 한 번만 호출된다. 2. render 함수 - render 함수는 클래스 컴포넌트의 화면 표시부분을 정의하는데 사용 ex) render() { const { counter } = this.state; return ( Counter App ); - render 함수는 부모 컴포넌트로부터 받은 Props값이 변경되거나 클래스 컴포넌트 안에서 this.setState를..

Props Props 는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터 State State 는 한 컴포넌트 안에서 유동적인 데이터를 다룰 때에 사용

2. ESLint ESLint는 자바스크립트의 코드를 분석하고 잠재적인 오류나 버그를 찾는데 "도움"을 주는 정적 분석 툴이다 정적 분석 툴이기에 간단한 문법적 오류나 복잡한 코드 스타일에 의해 발생할 가능성이 높은 버그만 찾을 수 있으며, 프로그램이 실행 중에 발생하는 버그는 알 수 없으며 비지니스 로직에서 문제점을 찾을 수 없다. 즉, 보조적인 툴로써만 사용하도록 하고 맹신하지 말자 설치 프로젝트에서 npm install eslint --save-dev. 하여 설치 후 npx eslint --init 를 하면 ESLint를 설정하기 위해 필요한 라이브러리를 설치할지 물어본다. 차례대로 자신의 프로젝트에 맞게 설정하면 된다. 설치후 .eslintrc.js 파일이 자동으로 생성되는 것을 확인하면 EsLi..

1. Prettier 코드 포맷터로 javascript, CSS, JSON 등을 지원 미리 약속한 코드 스타일에 맞춰 자동으로 코드의 형식을 수정해 주는 도구로, 협업시 여러 개발자들의 코드 스타일을 맞추는 데 도움을 준다. (프로젝트 내에서) npx install --save-dev prettier (Prettier 설정) 프로젝트 루트 폴더에서 .Prettierrc.js 파일을 생성 module.export = { singleQuote: true, trailingComma: 'all', printWidth: 100, }; 설정한 내용은 singleQuote : 싱글쿼트(')를 주로 사용하도록 설정 trailingComma : 콤마(,)를 추가할수 있다면, 콤마를 추가 printWidth : 한 줄에 ..

의존성 배열 - 의존성 배열이란 useEffect 훅에 입력하는 두 번째 매개변수로서, 의존성 배열의 내용이 변경되었을 경우 부수 효과 함수를 실행 1. useEffect(effect) 컴포넌트가 렝더링될 때마다 호출 2. useEffect(effect, []) 첫 번째 렌더링 후에만 호출 3. useEffect(effect, [userId]) 첫 번째 렝더링 후에 호출되며, 이후 userId가 변경될 때마다 호출 단, 3번에서 userId 라는 값은 항상 렐더링과 관련된 값이어야 한다. 렌더링과 관련된 값이라는 것은 그 값이 변경되면 컴포넌트가 다시 렌더링되는지를 보고 알수 있음. 어떤 변수의 값이 변경되었는데 컴포넌트가 다시 렌더링되지 않는다면 그 변수는 deps 배열에 넣을 필요가 없다. 결국 렌더..