1. 프로젝트 준비하기 App 컴포넌트: Viewer와 Controller 컴포넌트를 감싸는 템플릿이다. Viewer 컴포넌트: 현재의 카운트를 표시한다. Controller 컴포넌트: 카운트를 제어할 수 있는 기능을 제공한다. 리액트 앱 만들기 npx create-react-app . 다음 파일을 전부 삭제한다. src/App.test.js src/logo.svg src/reportWebVitals.js src/setupTest.js index.js를 수정한다. import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; const root = ReactDOM..

23-24/React.js 2 2023. 11. 17. 10:00

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재합니다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 하는 경우, 또는 불필요한 업데이트를 방지해야 할 때에 컴포넌트의 라이프사이클 메서드를 사용합니다. 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 함수 컴포넌트에서는 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있습니다. 7.1 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 9가지입니다. Will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드 :..

22-23/22-23 리액트 스타터 3 2022. 11. 17. 10:00

해당 포스트는 초보 웹 개발자를 위한 스프링 5 프로그래밍 입문 [최범균 저] 책 내용을 참고하였습니다. ❗컨테이너 초기화와 종료 📌기본 public class Main { public static void main(String[] args) { //1. 컨테이너 초기화 AnnotationConfigApplicationContext ctx = new AnnotationConfigApplicationContext(AppContext.class); //2. 컨테이너에서 빈 객체를 구해서 사용 Greeter g1 = ctx.getBean("greeter", Greeter.class); Greeter g2 = ctx.getBean("greeter", Greeter.class); System.out.println..

22-23/22-23 Spring 1 2022. 11. 5. 10:02

❗ 스프링 빈 콜백 📌 스프링 빈 라이프사이클 스프링 컨테이너 생성 → 스프링 빈 생성 → 의존관계 주입 → 초기화 콜백 → 사용 → 소멸 전 콜백 → 스프링 종료 스프링 컨테이너는 스프링 빈을 생성하는 동시에 해당 빈에 존재하는 모든 의존관계를 주입한다. 이 과정이 종료되면 초기화 작업이 시작되는데, 스프링에서는 초기화 시점에 호출할 수 있는 콜백 메서드를 제공한다. 또한, 비슷한 맥락에서 스프링 빈이 소멸되기 직전에 호출 가능한 콜백 메서드도 제공한다. ❗ 스프링이 제공하는 빈 생명주기 콜백 방식 인터페이스(InitializingBean, DisposableBean) 설정 정보에 초기화 메서드, 종료 메서드 지정 @PostConstruct, @PreDestory 애노테이션 지원 📌 인터페이스 Init..

22-23/22-23 Spring 1 2022. 10. 21. 10:00

이 장의 키워드 # 컨테이너 초기화와 종료 # 빈 객체의 라이프사이클 # 초기화, 소멸 과정 설정 # 싱글톤 범위, 프로토타입 범위 # 컨테이너 초기화와 종료 스프링 컨테이너는 초기화와 종료라는 라이프사이클을 갖는다. 아래 코드는 2장에서 작성한 Main.java의 일부다. // 1. 컨텍스트 객체 생성 및 2. 컨테이너 초기화 AnnotationConfigApplicationContext ctx = new AnnotationConfigApplicationContext(AppContext.class); // 3. 컨테이너에서 빈 객체를 구해서 사용 Greeter g = ctx.getBean("greeter", Greeter.class); String msg = g.greet("스프링"); System.o..

22-23/22-23 Spring 2 2022. 10. 13. 10:02

INDEX 7장 컴포넌트의 라이프사이클 메서드 1. 라이프사이클 메서드의 이해 ● 개념 2. 라이프사이클 메서드 살펴보기 2.1 render() 함수 2.2 constructor 메서드 2.3 getDerivedStateFromProps 메서드 2.4 componentDidMount 메서드 2.5 shouldComponentUpdate 메서드 2.6 getSnapshotBeforeUpdate 메서드 2.7 comoponentDidUpdate 메서드 2.8 componentWillUnmount 메서드 2.9 componentDidCatch 메서드 3. 라이프사이클 메서드 사용하기 3.1 예제 컴포넌트 생성 3.2 App 컴포넌트에서 예제 컴포넌트 사용 3.3 에러 잡아내기 4. 정리 ● 정리 5. Ques..

21-22/21-22 리액트 스타터 -2 2021. 12. 27. 13:00

1. 라이프사이클 메서드의 이해 1) 라이프 사이클 메서드의 종류(9가지)> Will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드 : 어떤 작업을 작동한 후에 실행되는 메서드 2) 라이프 사이클의 종류 마운트 : 페이지에 컴포넌트가 나타남 업데이트 : 컴포넌트 정보를 업데이트 언마운트 : 페이지에서 컴포넌트가 사라짐 (1) 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 한다. (2) 업데이트 컴포넌트가 업데이트하는 경우들 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 (3) 언마운트 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmo..

21-22/21-22 리액트 마스터 2021. 11. 8. 15:00