React 컴포넌트 생명주기 React 컴포넌트의 생명주기는 컴포넌트가 생성될 때부터 페이지에서 제거될 때까지의 과정을 말합니다. 이 과정에서 여러 생명주기 메서드가 호출되며, 개발자는 이 메서드들을 오버라이딩하여 특정 시점에 원하는 코드를 실행시킬 수 있습니다. 각 단계에서 호출되는 주요 메서드들을 아래 표에서 확인할 수 있습니다. 생명주기 단계 메서드 설명 마운팅 constructor() 컴포넌트를 새로 생성할 때마다 호출됩니다. 초기 상태 설정 및 메서드 바인딩에 사용됩니다. static getDerivedStateFromProps() 컴포넌트가 생성될 때와 업데이트될 때 props로부터 상태를 동기화하는 데 사용됩니다. render() 컴포넌트 UI를 렌더링하는 메서드입니다. componentDi..
JavaScript
Error Boundary React의 Error Boundary는 React 컴포넌트 트리 내에서 자식 컴포넌트의 JavaScript 에러를 잡아내고 처리하는 방법을 제공합니다. 컴포넌트 트리의 특정 부분이 예외적인 상황에서도 애플리케이션 나머지 부분의 정상적인 동작을 보장하기 위해 도입되었습니다. 생명주기 메서드(lifecycle methods) 또는 Hook을 통해 구현됩니다: static getDerivedStateFromError(error): 에러가 발생했을 때 호출되며, 이를 이용해 컴포넌트의 상태를 업데이트 할 수 있습니다. 주로 UI를 에러 상태로 전환하는 데 사용됩니다. componentDidCatch(error, info): 에러가 발생한 후에 호출되며, 에러에 대한 추가 로깅이나 오..
Hook Flow - useEffect useEffect 훅의 의존성 배열(Dependency Array)은 React 컴포넌트가 렌더링될 때 Side Effects을 언제 실행할지 결정하는 데 사용됩니다. useEffect는 주로 데이터 fetching, DOM 업데이트, 구독 설정 등의 작업을 수행하기 위해 사용되며, 의존성 배열을 통해 이러한 작업의 실행 조건을 정밀하게 제어할 수 있습니다. 동작 방식 useEffect => render 가 끝난 뒤 update시 => useEffect clean up / useEffect dependency가 있을 경우 => dependency가 변경될 때만 실행 클린업은 부모의 클린업이 먼저 실행된다. useeffect-클린업은 useeffect 이전에 실행된다..
많이 쓰는 용어 Vanilla JS 순수 자바스크립트를 의미함 특정 라이브러리나 프레임워크를 사용하지 않은 그 자체의 자바스크립트 JSX 문자도 HTML도 아닌 JavaScript의 확장 문법 const element = Hello, world!; Babeljs.io JavaScript Complier 컴파일러: 언어 해석기, 특정 언어를 다른 프로그래밍 언어로 옮기는 프로그램 스프레드 연산자 const customH1 = {props.text}; // 스프레드 연산자 // const customH1 = {props.text}; ReactDOM.render(customH1, rootElement); re-render 바닐라 JS => 변경으로 인해 Element를 다시 그림 React => Virtual..
구글 크롬 개발자 모드와 디버깅 JS 개발을 할 때 크롬을 많이 사용하는데요 크롬을 통해서 디버깅이 가능합니다. 네트워크를 항목을 통해서 값이 정상적으로 전달되는지 볼 수도 있으며, 네트워크를 통해서 시간 측정도 가능합니다. 실행방법 Chrome에서 F12 개발자 모드를 실행한다. 정말 편리한 기능이 많습니다. 제가 가장 사용 많이 하는 탭은 Console, Sources, Network, Elements를 가장 많이 사용합니다. 그리고 요소를 찾을 때 Ctrl + Shift + C를 사용해서 많이 확인하며.. 간단한 화면 디자인 수정에서도 유용하게 사용 가능합니다. Console, Source탭 소스를 찾기 힘들 때는 console.log()를 찍어서 그 위치를 마우스로 클릭하면 디버깅이 걸립니다. C..
동적으로 생성된 태그에 이벤트 거는 방법 개발자로 일하면서 혹은 공부하다가 이거 알면 진짜 편했던 건데.. 이거 때문에 몇 시간씩 고생한 경우가 종종 있었거든요.. 저도 처음에 이걸 도대체 어떻게 해야 하나? 무슨 원리로 이렇게 되는 건가? 삽질하면서 찾아봤던걸 정리해봅니다. 어떤 경우에 찾아보나요? ( 제가 이러다가 찾아서..) 동적으로 태그를 생성할 때(clone 떠서 만들 때..) 이벤트가 안 걸려요 ㅠㅠ 규칙이 있는 복수의 태그가 동일한 규칙으로 작동해서 한 번에 이벤트를 걸고 싶어요 같은 태그에 이벤트가 중복으로 걸려요 ㅠㅠ JS를 모듈화 하고 싶습니다. 어떤 경우에 사용하나요? 동적으로 생성된 태그에 이벤트를 걸 때 복수의 태그에 동일한 이벤트를 걸 때 사용자 태그로 정의하여 그 태그로 시작하..
