Rootable의 개발일기

📌 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 조작으로 인한 성능 저하가 발생할 수 있다. 따라서, 모든 컴포넌트를 한 번에 로..

📌 엘리먼트(Element) React 애플리케이션을 구성하는 블록 엘리먼트는 화면에 보이는 것들을 기술하며, React 엘리먼트는 변경되지 않는다. const element = Hello, world; 일반적으로 엘리먼트는 직접 사용되지 않고 컴포넌트로부터 반환된다. 📌 컴포넌트(Component) 페이지에 렌더링 할 React 엘리먼트를 반환하는 작고 재사용 가능한 코드 조각 가장 간단한 React 컴포넌트는 React 엘리먼트를 반환하는 일반 Javascript 함수 function Welcome(props) { return Hello, {props.name}; } 컴포넌트는 기능 별로 나눌 수 있으며 다른 컴포넌트 안에서 사용할 수 있다. 컴포넌트는 다른 컴포넌트, 배열, 문자열, 그리고 숫자를 ..