Rootable의 개발일기

📌 React의 생명주기 모든 React 컴포넌트에는 LifeCycle이 존재한다. 📢 컴포넌트의 생명주기 생성(mounting) ➡ 업데이트(updating) ➡ 제거(unmounting) 생명주기의 때에 따라 처리해야 할 작업을 지정해 줘야 불필요한 업데이트를 방지할 수 있다. React class component : 생명주기 메서드 활용 React functional component : Hook 사용 📝 생명주기 메서드 ✔ Mounting (생성) 컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다. 1. constructor 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 this.props, this.state에 접근할 수 있으며 리액트 요소를 반환 setStat..

📌 useState React의 state machine에 연결하는 기본적인 방법 동적으로 바뀌는 값을 관리할 때 사용 /*기본 형태 item: state를 통해 담은 data setItem: item을 변경하는 함수 1: 초기값 (어떤 값이라도 don't care) */ const [item, setItem] = useState(1); 🔍 예제 (Counter) Increment 클릭할 때마다 item 1 증가 Decrement 클릭할 때마다 item 1 감소 function App() { const [item, setItem] = useState(1); const incrementItem = () => setItem((current) => current + 1); const decrementItem ..

📌 Promise 객체란? React에서 비동기 처리에 활용되는 객체로 주로 웹 서비스를 구현할 때 원활한 데이터 통신을 위해 활용된다. 웹 페이지에서 서버로 데이터를 요청했을 때, 데이터를 모두 받기 전에 웹에 출력하려고 하는 경우를 방지하기 위해 활용된다. Promise는 비동기 작업으로 인한 성공 또는 실패와 그 결과 값을 나타낸다. 여기서 결과 값은 최종 결과가 아닌 미래의 어떤 시점에 결과를 제공하겠다는 약속(프로미스)을 반환한다. 비동기 로직을 마치 동기 로직처럼 사용할 수 있는 기능을 가졌다. 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다. 📌 상태 Pending(대기) : 비동기 로직 처리의 미완료 상태 Fulfilled(이행) : 비동기 로직 ..

📌 Suspense 비동기 로딩 작업을 지원하는 React 내장 컴포넌트 Suspense를 사용하면 컴포넌트가 렌더링 하기 전에 다른 작업이 먼저 이루어지도록 대기한다. 비동기 관련 로딩상태를 처리할 때 Promise 기반으로 동작한다. 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React 내장 컴포넌트 code spliting을 통해 필요할 때 동적으로 컴포넌트를 import하는 lazy loading 방식을 구현하는 데 사용된다. 💡 Code spliting React는 SPA(Single Page Application) 특징을 가지므로, 빈번한 DOM 조작으로 인한 성능 저하가 발생할 수 있다. 따라서, 모든 컴포넌트를 한 번에 로..