티스토리

Rootable의 개발일기

검색하기

블로그 홈

Rootable의 개발일기

dev-rootable.tistory.com/m

dev-rootable 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

React의 생명주기 📌 React의 생명주기 모든 React 컴포넌트에는 LifeCycle이 존재한다. 📢 컴포넌트의 생명주기 생성(mounting) ➡ 업데이트(updating) ➡ 제거(unmounting) 생명주기의 때에 따라 처리해야 할 작업을 지정해 줘야 불필요한 업데이트를 방지할 수 있다. React class component : 생명주기 메서드 활용 React functional component : Hook 사용 📝 생명주기 메서드 ✔ Mounting (생성) 컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다. 1. constructor 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 this.props, this.state에 접근할 수 있으며 리액트 요소를 반환 setStat.. 공감수 0 댓글수 0 2024. 3. 14.
Hooks 📌 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 .. 공감수 0 댓글수 0 2024. 3. 14.
Promise 📌 Promise 객체란? React에서 비동기 처리에 활용되는 객체로 주로 웹 서비스를 구현할 때 원활한 데이터 통신을 위해 활용된다. 웹 페이지에서 서버로 데이터를 요청했을 때, 데이터를 모두 받기 전에 웹에 출력하려고 하는 경우를 방지하기 위해 활용된다. Promise는 비동기 작업으로 인한 성공 또는 실패와 그 결과 값을 나타낸다. 여기서 결과 값은 최종 결과가 아닌 미래의 어떤 시점에 결과를 제공하겠다는 약속(프로미스)을 반환한다. 비동기 로직을 마치 동기 로직처럼 사용할 수 있는 기능을 가졌다. 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다. 📌 상태 Pending(대기) : 비동기 로직 처리의 미완료 상태 Fulfilled(이행) : 비동기 로직 .. 공감수 0 댓글수 0 2024. 3. 11.
Suspense와 lazy 📌 Suspense 비동기 로딩 작업을 지원하는 React 내장 컴포넌트 Suspense를 사용하면 컴포넌트가 렌더링 하기 전에 다른 작업이 먼저 이루어지도록 대기한다. 비동기 관련 로딩상태를 처리할 때 Promise 기반으로 동작한다. 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React 내장 컴포넌트 code spliting을 통해 필요할 때 동적으로 컴포넌트를 import하는 lazy loading 방식을 구현하는 데 사용된다. 💡 Code spliting React는 SPA(Single Page Application) 특징을 가지므로, 빈번한 DOM 조작으로 인한 성능 저하가 발생할 수 있다. 따라서, 모든 컴포넌트를 한 번에 로.. 공감수 0 댓글수 0 2024. 3. 11.
React 용어 📌 엘리먼트(Element) React 애플리케이션을 구성하는 블록 엘리먼트는 화면에 보이는 것들을 기술하며, React 엘리먼트는 변경되지 않는다. const element = Hello, world; 일반적으로 엘리먼트는 직접 사용되지 않고 컴포넌트로부터 반환된다. 📌 컴포넌트(Component) 페이지에 렌더링 할 React 엘리먼트를 반환하는 작고 재사용 가능한 코드 조각 가장 간단한 React 컴포넌트는 React 엘리먼트를 반환하는 일반 Javascript 함수 function Welcome(props) { return Hello, {props.name}; } 컴포넌트는 기능 별로 나눌 수 있으며 다른 컴포넌트 안에서 사용할 수 있다. 컴포넌트는 다른 컴포넌트, 배열, 문자열, 그리고 숫자를 .. 공감수 0 댓글수 0 2024. 3. 11.
Fetch와 Axios 📌 정의 Promise 기반의 HTTP 클라이언트 백엔드 또는 서드파티 API에 네트워크 요청이 필요한 애플리케이션을 개발할 때 사용하며, 네트워크에 요청을 전달하면 이행 혹은 거부할 수 있는 promise 가 반환된다. 📢 두 클라이언트 모두 비동기 🔍 Promise 비동기 작업을 수행한 후 미래에 받을 성공 또는 실패에 대한 결과값에 대한 처리기 비동기 작업은 실행 시점에는 그 결과를 알 수 없지만, 특정 시점에 완료 또는 실패에 대한 결과를 가져야 한다. 이를 위해 Promise 를 사용할 수 있으며, 마치 동기 메서드처럼 값을 반환할 수 있다. 다만, 최종 결과를 반환하는 것이 아니고 미래의 어떤 시점에 결과를 제공하겠다는 약속을 반환한다. ✔ Promise 상태 대기(pending): 이행하지도.. 공감수 0 댓글수 0 2024. 1. 20.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.