EJ의 DEVLOG 💻

에러 경계 (Error Boundary) React 애플리케이션에서 컴포넌트 트리 하위에서 발생한 에러를 처리 방법을 제공하는 컴포넌트이다. 애플리케이션의 특정 부분에서 발생한 에러를 부모 컴포넌트에서 처리할 수 있도록 한다. 애플리케이션 최상위에서 사용된다. 필요에 따라 여러 개의 에러 경계를 중첩해서 사용할 수 있으며, 여러 에러를 독립적으로 처리 할 수 있다. 애플리케이션 일부에서 발생한 에러로 전체 애플리케이션의 렌더링이 중단되는 것을 방지 할 수 있다. static getDerivedStateFromError() 자식 컴포넌트에서 에러가 발생했을 때 호출 되는 정적 메서드이다. 에러 상태를 컴포넌트에 반영할 수 있다. componentDidCatch() 생명주기 메서드 중 하나 자식 컴포넌트에서..

componentWillUnmount() 생명주기 메서드 중 하나 컴포넌트가 DOM에서 언마운트(제거) 되기 전에 호출된다. 리소스 해제, 타이머 제거, 이벤트 리스너 해제 등 컴포넌트 정리 작업을 수행 할 수 있다. import React, { Component } from 'react'; class MyComponent extends Component { constructor(props) { super(props); this.state = { timerId: null, }; } componentDidMount() { // 컴포넌트가 마운트된 후에 타이머를 설정 const timerId = setInterval(() => { console.log('Timer is ticking...'); }, 1000..

static getDerivedStateFromProps() props로부터 상태를 동기화 하고자 할 때 호출하는 메서드 마운트 이후에도 props로부터 상태를 업데이트 할 필요가 있을 때 호출한다. shouldComponentUpdate() 생명주기 메서드 중 하나 컴포넌트 업데이트(렌더링) 여부를 결정한다. render() 컴포넌트 UI 렌더링을 수행한다. getSnapshotBeforeUpdate() 생명주기 메서드 중 하나 최근에 렌더링 된 결과가 DOM에 반영되기 직전에 호출되는 메서드 이다. componentDidUpdate() 생명주기 메서드 중 하나 업데이트가 완료된 이후에 호출되는 메서드 이다. import React, { Component } from 'React' class MyCom..

counstructor() 컴포넌트 생성 시 가장 먼저 호출되는 첫번째 메서드 초기 상태 설정 및 데이터 바인딩을 수행한다. state getDerivedStateFromProps() props로부터 상태를 동기화 하고자 할 때 호출하는 메서드 render() 컴포넌트 UI 렌더링을 수행한다. componentDidMount() 생명주기 메서드 중 하나. 컴포넌트가 렌더링이 완료 되고 DOM에 마운트 되고난 이후에 실행되는 메서드 초기 데이터 로딩 혹은 외부 데이터 요청 등의 비동기 작업을 실행한다. import React, { Component } from 'React' class MyComponent extends Component { constructor(props) { super(props); /..

React에서 컴포넌트가 렌더링 되는 케이스는 다양하다. 초기 렌더링 : 컴포넌트가 초기 생성되고 DOM에 마운트 될 때 props가 변경될 때 state가 변경될 때 부모 컴포넌트가 렌더링 될 때 컴포넌트 update 관련 생명주기 메서드가 실행되었을 때 : shouldComponentUpdate, componentDidUpdate 등등.. React 렌더링 주기는 컴포넌트가 언제 렌더링 되고, 업데이트 되는지에 대해 설명한다. (생명주기 메서드는 컴포넌트의 생성, 업데이트, 소멸에 관한 메서드에 대한 내용이므로 개념이 다름!) 1. 생성 단계 (Mounting) counstructor() state getDerivedStateFromProps() render() componentDidMount() R..

생명 주기 메서드는 컴포넌트가 특정 상태에 도달했을 때 자동으로 호출된다. ex) 컴포넌트 생성, 업데이트, 제거 등등... React의 주요 생명 주기 메서드는 다음과 같다. 1. componentDidMount() 컴포넌트가 렌더린 된 직후에 호출되는 메서드이다. 주로 초기 데이터 로딩, 외부 라이브러리 초기화 등에 사용된다. import React, { Component } from 'react'; class MyComponent extends Component { constructor(props) { super(props); } componentDidMount() { // 초기 데이터 로딩 } render() { return (MyComponent); } } export default MyComp..

전개 연산자(`...`) 사용 이전 객체의 속성을 그대로 가져오면서 새로운 데이터를 추가하거나 덮어쓰는 방식으로 객체를 복사한다. (불변성 유지) const [myObject, setMyObject] = useState({ name: 'John', age: 25 }); const updateObject = (newData) => { setMyObject((prevObject) => ({ ...prevObject, ...newData, })); }; console.log(updateObject({ age: 26 })); // { name: 'John', age: 26 } Object.assign() Object.assign(target, source1, source2, ...); 원본 객체에서 속성을 다른..

State에는 JavaScript에서 지원하는 모든 타입의 값이 할당될 수 있다. ex) string, number, boolean, array, object 등등... 그 중 핵심은 State 값이 불변을 유지하면서 업데이트 되어야 한다는 점이다. 배열 타입 State 업데이트 방법은 많지만 이하 세 가지 방법에 대해 살펴보려고 한다. concat() 사용 배열에 새로운 요소를 추가하여 새로운 배열을 만드는 JavaScript 배열 메서드 중 하나이다. 기존 배열을 변경하지 않고 새로운 배열을 반환한다. (불변성 유지) const [myArray, setMyArray] = useState([1, 2, 3]); const addElementConcat = (newElement) => { setMyArra..

변수 값을 직접 할당하여 변경한다. 작성된 Component 내부에서만 사용되는 값이다. 변수 값이 변경되어도 Component가 리렌더링 되지 않는다. let myVariable = 0; myVariable = 1; State useState를 사용하여 선언된 State는 setState를 사용하여 값을 변경한다. 작성된 Component 내 외부에서 사용될 수 있다. props나 context 등을 통해 하위 컴포넌트로 전달 가능 State 값이 변경되면 Component가 리렌더링 되도록 트리거 된다. 상태 관리가 필요하거나, 동적 UI 구현을 위해 사용된다. const [myState, setMyState] = useState(0); setMyState(1);

event (이벤트) 카멜 케이스로 작성되며, html 에서 onclick은 React에서 onClick으로 작성한다. 핸들러 함수는 컴포넌트 내에서 작성되며, 익명함수로도 작성할 수 있다. 익명함수 내에선 this가 아무것도 가리키지 않으므로 bind 함수를 사용하여 this를 지정해준다. import React, { Component } from 'react'; class MyComponent extends Component { constructor(props) { super(props); this.state = { buttonName = '저장' }; } handleClick() { console.log(this.state.buttonName, '버튼이 클릭되었습니다.'); } render() { ..