React #4

React 2023. 5. 9. 09:39

서블릿 라이프 사이클
1. 서블릿 로딩
2. 서블릿 인스턴스 생성
3. init() 메서드 한 번 호출
4. 각 클라이언트 요청에 대하여 반복적으로 service() 메서드 호출
5. destroy() 메서드 호출
웹소켓 라이프 사이클
1. 연결(Connecting): 클라이언트가 서버에 연결을 시도합니다. 이 단계에서는 클라이언트가 웹 소켓 엔드포인트로 HTTP 헤더를 사용하여 연결 요청을 보냅니다.
2. 핸드셰이크(Handshaking): 서버는 클라이언트의 연결 요청을 받고 웹 소켓 프로토콜을 인식합니다. 서버는 클라이언트와 핸드셰이크를 수행하여 프로토콜 버전, 압축 방법, 인증 등의 세부 사항을 협상합니다.
3. 개방(Open): 핸드셰이크가 성공적으로 완료되면 서버와 클라이언트는 연결이 개방됩니다. 이제 양방향 통신을 할 수 있습니다.
4. 메시지 교환(Message Exchange): 연결이 개방된 후에는 클라이언트와 서버 간에 메시지를 주고받을 수 있습니다. 클라이언트나 서버는 언제든지 메시지를 보낼 수 있으며, 상대방은 메시지를 수신하여 처리합니다.
5. 닫기(Closing): 클라이언트나 서버가 연결을 닫고자 할 때 닫기 프로세스가 시작됩니다. 이 단계에서는 닫기 프레임을 교환하여 연결을 안전하게 종료합니다.
6. 종료(Closed): 연결이 닫히면 클라이언트와 서버는 종료된 상태가 됩니다. 이후에는 더 이상 통신이 불가능합니다.
자바 객체 라이프사이클
1. 로딩(Loading): 자바 가상 머신(JVM)에 의해 클래스 파일이 메모리에 로드됩니다. 클래스 파일은 클래스 로더를 통해 로딩되며, 필요한 클래스 및 리소스를 검색하고 메모리에 적재합니다.
2. 검증(Verification): 로딩된 클래스 파일이 유효한 자바 바이트코드인지 검증됩니다. 문법적인 오류나 보안 문제가 있는지 확인합니다.
3. 준비(Preparation): 클래스의 정적 변수(static variable)와 기본적인 데이터 구조가 할당되고 초기화됩니다. 이 단계에서는 정적 변수에 기본값이 할당됩니다.
4. 초기화(Initialization): 클래스의 정적 변수 및 정적 블록(static block)이 초기화됩니다. 정적 변수에 명시된 값들이 할당되고, 정적 블록의 코드가 실행됩니다.
5. 인스턴스화(Instantiation): 클래스의 인스턴스가 생성됩니다. new 키워드를 사용하여 객체를 생성하고, 인스턴스 변수와 인스턴스 블록(instance block)이 초기화됩니다.
6. 사용(Usage): 인스턴스가 생성된 후에는 메서드 호출, 필드 참조 등과 같은 동작을 통해 프로그램이 실행되고 사용됩니다. 이 단계에서는 프로그램의 로직에 따라 객체의 상태가 변경될 수 있습니다.
7. 소멸(Termination): 프로그램이 종료되거나 객체가 더 이상 사용되지 않을 때, 메모리와 리소스를 정리하고 소멸합니다. 이 단계에서는 필요한 정리 작업이 수행되고, 가비지 컬렉터가 동작하여 더 이상 참조되지 않는 객체를 수거합니다.
React 라이프 사이클
- 마운트
  - DOM이 생성되고 웹 브라우저상에서 나타나는 것을 마운트라고 한다
  - 마운트 할 때 호출하는 메서드
    - constructor(props)
      - 클래스 생성자 메서드
    - getDerivedStateFromProps(nextProps, prevState)
      - props에 있는 값을 state에 넣을때 사용하는 메서드
    - render
      - UI렌더링 하는 메서드
    - componentDidMount
      - 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드
      - 비동기작업을 처리
- 업데이트
  - props가 바뀔 때
  - state가 바뀔 때
  - 부모 컴포넌트가 리렌더링 될 때
  - this.forceUpdate로 강제로 렌더링을 트리거 할 때
  - 업데이트 할 때 호출하는 메서드
    - getDerivedStateFromProps(nextProps, prevState)
      - 마운트 과정에서 호출되며, 업데이트가 시작하기전에도 호출 됩니다
    - shouldComponentUpdate(nextProps, nextState)
      - boolean값을 반환하며, true일 때 다음라이프사이클메서드를 실행하고 false일때 작업을 중지합니다
      - 이 메서드 안에서 props와 state는 this.props와 this.state로 접근하고, 새로 설정될 props또는 state는 nextProps와 nextState로 접근할 수 있습니다.
    - render
      - 컴포넌트를 리렌더링 합니다
    - getSnapshotBeforeUpdate
      - 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드입니다.
      - snapshot값을 전달받는데 주로 업데이트 하기 직전의 값을 참고할 일이 있을 때 활용 됩니다(예: 스크롤바 위치 유지)
    - componentDidUpdate(prevProps, prevState, snapshot)
      - 컴포넌트의 업데이트 작업이 끝난 후 호출되는 메서드 입니다
- 언마운트
  - 컴포넌트를 DOM에서 제거하는 것을 언마운트라고 합니다
  - componentWillUnmount
    - 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드 입니다
static
- 내부적으로 비동기 처리됨
에러 잡아내기
- ErrorBoundary.js를 만들어줘야한다
- 코드
- import React, { Component } from "react"; class ErrorBoundary extends Component { state = { error: false, }; componentDidCatch(error, info) { this.setState({ error: true }); console.log(error, info); } render() { if (this.state.error) return <div>에러가 발생 했습니다.</div>; return this.props.children; } } export default ErrorBoundary;
- App.js에서 컴포넌트를 부르기전에 <ErrorBoundary></ErrorBoundary>호출해서 처리한다
  - 코드
  - import React, { Component } from "react"; import LifeCycleSample from "./LifeCycleSample"; import ErrorBoundary from "./ErrorBoundary"; function getRandomColor() { return "#" + Math.floor(Math.random() * Math.pow(2, 24)).toString(16); } class App extends Component { state = { color: "#000000", }; handleClick = () => { this.setState({ color: getRandomColor(), }); }; render() { return ( <div> <button onClick={this.handleClick}>랜덤색상</button> <ErrorBoundary> <LifeCycleSample color={this.state.color} /> </ErrorBoundary> </div> ); } } export default App;
Hook
- useState
  - 클래스 초기화 블럭에 사용할 수 있다
    - const [value, setValue] = useState(0);
    - 첫번째 원소는 상태값, 두번째 원소는 상태를 설정
    - 문자가 올 수도 있고 빈 문자가 올 수도 있고 숫자가 올 수도 있으며 기본값이 있을경우 기본값을 넣어준다
    - 여러번 사용해도 상관 없다
    - const [name, setName] = useState(""); const [nickname, setNickname] = useState("");
- useEffect
  - componentDidMount와 componentDidUpdate 합친 형태로 봐도 무방하다
  - componentDidMount는 초기로드 시 호출
  - componentDidUpdate는 상태가 변경 되었을 시 호출
  - 두번씩 호출 되는 경우 <React.StrictMode>를 지우면 된다
  - index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( //밑에 부분을 지우면 된다 ~~<React.StrictMode>~~ <App /> ~~</React.StrictMode>~~ ); s reportWebVitals();
  - 특정 값이 업데이트 될 때만 실행하고 싶을때 []를 써주고 특정값을 써줘도 된다(보고싶은 배열 이름)
  - useEffect(() => { // console.log("렌더링이 완료되었습니다."); // console.log({ name, nickname }); console.log("effect"); console.log(name); return () => { console.log("cleanup"); console.log(name); }; }, **[]**); //마운트 시에만 실행하고 싶을때 []를 입력한다 특정값만 보고싶을땐 특정 배열에 이름만 써주면 된다 [name]
  - 뒷정리(cleanup)
    - 사용 했던 함수를 return값에 다시 반환 해준다
    - useEffect(() => { // console.log("렌더링이 완료되었습니다."); // console.log({ name, nickname }); console.log("effect"); console.log(name); return () => { console.log("cleanup"); console.log(name); }; }, **[]**); //마운트 시에만 실행하고 싶을때 []를 입력한다 특정값만 보고싶을땐 특정 배열에 이름만 써주면 된다 [name]
    - 반환 해주고 다시 호출 하게 되면 언마운트하고 다시 리마운트 하는 것이다
- useReducer
  - useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 떄 사용 하는 Hook이다
  - 첫번째 파라미터에는 리듀서 함수를 넣고, 두번째 파라미터에는 해당 리듀서의 기본값을 넣어준다(useReducer(reducer, { value: 0 });)
```
const [state, dispatch] = useReducer(reducer, { value: 0 });
```
  - state는 현재 가리키고 있는 상태고 dispatch는 액션을 발생시키는 함수 이다
- useMemo
  - 함수 컴포넌트 내부에서 발생하는 연산을 최저고하 할 수 있다
  - 렌더링 과정에서 특정 값이 바뀌었을때만 연산을 실행하고 원하는 값이 바뀌지 않았다면 이전 연산했던 결과를 다시 사용하는 방식이다
```
mport React, { useCallback, useMemo, useRef, useState } from "react";

const getAverage = (numbers) => {
  console.log("평균값 계산중...");
  if (numbers.length === 0) return 0;
  //reduce는 매개변수가 2개 이고 반환 값이 한개이다
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};
const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState("");
  const inputEl = useRef(null);

  const onChange = useCallback((e) => {
    setNumber(e.target.value);
  }, []);

  const onInsert = useCallback(() => {
    //input에 value값이 입력과 동시에 숫자로 변환
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber("");
    inputEl.current.focus();
  }, [number, list]); //number 혹은 list가 바뀌것을때만 함수 생성

  const avg = useMemo(() => getAverage(list), [list]);
  return (
    <div>
      <input value={number} onChange={onChange} ref={inputEl} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균값 : </b> {avg}
      </div>
    </div>
  );
};

export default Average;
```
- useCallback
  - 렌더링 성능을 최적화 해야 하는 상황에서 사용
  - 이전에 만들어 놨던 함수를 재사용 할 수 있다
  - 코드
  - constr onChange = useCallback(e=>{...},[number, list]);
  - useCallback에서 첫번쨰 파라미터에는 생성하고 싶은 함수를 넣고 두 번째 파라미터에는 배열을 넣으면 된다 위 코드 내용 처럼 하면 인풋 내용이 바뀌너 새로운 항목이 추가될 때 새로 만들어진 함수를 사용하게 된다
- useRef
  - input의 값을 입력하고 버튼을 눌렀을때 ref로 input에 focus를 줄 수 있다
  - 코드
  - const inputEl = useRef(null); const onInsert = useCallback(() => { //input에 value값이 입력과 동시에 숫자로 변환 const nextList = list.concat(parseInt(number)); setList(nextList); setNumber(""); inputEl.current.focus(); }, [number, list]); //number 혹은 list가 바뀌것을때만 함수 생성 <input value={number} onChange={onChange} ref={inputEl} />
- 커스텀 Hook
컴포넌트 스타일링
서블릿 라이프 사이클
1. 서블릿 로딩
2. 서블릿 인스턴스 생성
3. init() 메서드 한 번 호출
4. 각 클라이언트 요청에 대하여 반복적으로 service() 메서드 호출
5. destroy() 메서드 호출
웹소켓 라이프 사이클
1. 연결(Connecting): 클라이언트가 서버에 연결을 시도합니다. 이 단계에서는 클라이언트가 웹 소켓 엔드포인트로 HTTP 헤더를 사용하여 연결 요청을 보냅니다.
2. 핸드셰이크(Handshaking): 서버는 클라이언트의 연결 요청을 받고 웹 소켓 프로토콜을 인식합니다. 서버는 클라이언트와 핸드셰이크를 수행하여 프로토콜 버전, 압축 방법, 인증 등의 세부 사항을 협상합니다.
3. 개방(Open): 핸드셰이크가 성공적으로 완료되면 서버와 클라이언트는 연결이 개방됩니다. 이제 양방향 통신을 할 수 있습니다.
4. 메시지 교환(Message Exchange): 연결이 개방된 후에는 클라이언트와 서버 간에 메시지를 주고받을 수 있습니다. 클라이언트나 서버는 언제든지 메시지를 보낼 수 있으며, 상대방은 메시지를 수신하여 처리합니다.
5. 닫기(Closing): 클라이언트나 서버가 연결을 닫고자 할 때 닫기 프로세스가 시작됩니다. 이 단계에서는 닫기 프레임을 교환하여 연결을 안전하게 종료합니다.
6. 종료(Closed): 연결이 닫히면 클라이언트와 서버는 종료된 상태가 됩니다. 이후에는 더 이상 통신이 불가능합니다.
자바 객체 라이프사이클
1. 로딩(Loading): 자바 가상 머신(JVM)에 의해 클래스 파일이 메모리에 로드됩니다. 클래스 파일은 클래스 로더를 통해 로딩되며, 필요한 클래스 및 리소스를 검색하고 메모리에 적재합니다.
2. 검증(Verification): 로딩된 클래스 파일이 유효한 자바 바이트코드인지 검증됩니다. 문법적인 오류나 보안 문제가 있는지 확인합니다.
3. 준비(Preparation): 클래스의 정적 변수(static variable)와 기본적인 데이터 구조가 할당되고 초기화됩니다. 이 단계에서는 정적 변수에 기본값이 할당됩니다.
4. 초기화(Initialization): 클래스의 정적 변수 및 정적 블록(static block)이 초기화됩니다. 정적 변수에 명시된 값들이 할당되고, 정적 블록의 코드가 실행됩니다.
5. 인스턴스화(Instantiation): 클래스의 인스턴스가 생성됩니다. new 키워드를 사용하여 객체를 생성하고, 인스턴스 변수와 인스턴스 블록(instance block)이 초기화됩니다.
6. 사용(Usage): 인스턴스가 생성된 후에는 메서드 호출, 필드 참조 등과 같은 동작을 통해 프로그램이 실행되고 사용됩니다. 이 단계에서는 프로그램의 로직에 따라 객체의 상태가 변경될 수 있습니다.
7. 소멸(Termination): 프로그램이 종료되거나 객체가 더 이상 사용되지 않을 때, 메모리와 리소스를 정리하고 소멸합니다. 이 단계에서는 필요한 정리 작업이 수행되고, 가비지 컬렉터가 동작하여 더 이상 참조되지 않는 객체를 수거합니다.
React 라이프 사이클
- 마운트
  - DOM이 생성되고 웹 브라우저상에서 나타나는 것을 마운트라고 한다
  - 마운트 할 때 호출하는 메서드
    - constructor(props)
      - 클래스 생성자 메서드
    - getDerivedStateFromProps(nextProps, prevState)
      - props에 있는 값을 state에 넣을때 사용하는 메서드
    - render
      - UI렌더링 하는 메서드
    - componentDidMount
      - 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드
      - 비동기작업을 처리
- 업데이트
  - props가 바뀔 때
  - state가 바뀔 때
  - 부모 컴포넌트가 리렌더링 될 때
  - this.forceUpdate로 강제로 렌더링을 트리거 할 때
  - 업데이트 할 때 호출하는 메서드
    - getDerivedStateFromProps(nextProps, prevState)
      - 마운트 과정에서 호출되며, 업데이트가 시작하기전에도 호출 됩니다
    - shouldComponentUpdate(nextProps, nextState)
      - boolean값을 반환하며, true일 때 다음라이프사이클메서드를 실행하고 false일때 작업을 중지합니다
      - 이 메서드 안에서 props와 state는 this.props와 this.state로 접근하고, 새로 설정될 props또는 state는 nextProps와 nextState로 접근할 수 있습니다.
    - render
      - 컴포넌트를 리렌더링 합니다
    - getSnapshotBeforeUpdate
      - 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드입니다.
      - snapshot값을 전달받는데 주로 업데이트 하기 직전의 값을 참고할 일이 있을 때 활용 됩니다(예: 스크롤바 위치 유지)
    - componentDidUpdate(prevProps, prevState, snapshot)
      - 컴포넌트의 업데이트 작업이 끝난 후 호출되는 메서드 입니다
- 언마운트
  - 컴포넌트를 DOM에서 제거하는 것을 언마운트라고 합니다
  - componentWillUnmount
    - 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드 입니다
static
- 내부적으로 비동기 처리됨
에러 잡아내기
- ErrorBoundary.js를 만들어줘야한다
- 코드
- import React, { Component } from "react"; class ErrorBoundary extends Component { state = { error: false, }; componentDidCatch(error, info) { this.setState({ error: true }); console.log(error, info); } render() { if (this.state.error) return <div>에러가 발생 했습니다.</div>; return this.props.children; } } export default ErrorBoundary;
- App.js에서 컴포넌트를 부르기전에 <ErrorBoundary></ErrorBoundary>호출해서 처리한다
  - 코드
  - import React, { Component } from "react"; import LifeCycleSample from "./LifeCycleSample"; import ErrorBoundary from "./ErrorBoundary"; function getRandomColor() { return "#" + Math.floor(Math.random() * Math.pow(2, 24)).toString(16); } class App extends Component { state = { color: "#000000", }; handleClick = () => { this.setState({ color: getRandomColor(), }); }; render() { return ( <div> <button onClick={this.handleClick}>랜덤색상</button> <ErrorBoundary> <LifeCycleSample color={this.state.color} /> </ErrorBoundary> </div> ); } } export default App;
Hook
- useState
  - 클래스 초기화 블럭에 사용할 수 있다
    - const [value, setValue] = useState(0);
    - 첫번째 원소는 상태값, 두번째 원소는 상태를 설정
    - 문자가 올 수도 있고 빈 문자가 올 수도 있고 숫자가 올 수도 있으며 기본값이 있을경우 기본값을 넣어준다
    - 여러번 사용해도 상관 없다
    - const [name, setName] = useState(""); const [nickname, setNickname] = useState("");
- useEffect
  - componentDidMount와 componentDidUpdate 합친 형태로 봐도 무방하다
  - componentDidMount는 초기로드 시 호출
  - componentDidUpdate는 상태가 변경 되었을 시 호출
  - 두번씩 호출 되는 경우 <React.StrictMode>를 지우면 된다
  - index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( //밑에 부분을 지우면 된다 ~~<React.StrictMode>~~ <App /> ~~</React.StrictMode>~~ ); s reportWebVitals();
  - 특정 값이 업데이트 될 때만 실행하고 싶을때 []를 써주고 특정값을 써줘도 된다(보고싶은 배열 이름)
  - useEffect(() => { // console.log("렌더링이 완료되었습니다."); // console.log({ name, nickname }); console.log("effect"); console.log(name); return () => { console.log("cleanup"); console.log(name); }; }, **[]**); //마운트 시에만 실행하고 싶을때 []를 입력한다 특정값만 보고싶을땐 특정 배열에 이름만 써주면 된다 [name]
  - 뒷정리(cleanup)
    - 사용 했던 함수를 return값에 다시 반환 해준다
    - useEffect(() => { // console.log("렌더링이 완료되었습니다."); // console.log({ name, nickname }); console.log("effect"); console.log(name); return () => { console.log("cleanup"); console.log(name); }; }, **[]**); //마운트 시에만 실행하고 싶을때 []를 입력한다 특정값만 보고싶을땐 특정 배열에 이름만 써주면 된다 [name]
    - 반환 해주고 다시 호출 하게 되면 언마운트하고 다시 리마운트 하는 것이다
- useReducer
  - useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 떄 사용 하는 Hook이다
  - 첫번째 파라미터에는 리듀서 함수를 넣고, 두번째 파라미터에는 해당 리듀서의 기본값을 넣어준다(useReducer(reducer, { value: 0 });)
```
const [state, dispatch] = useReducer(reducer, { value: 0 });
```
  - state는 현재 가리키고 있는 상태고 dispatch는 액션을 발생시키는 함수 이다
- useMemo
  - 함수 컴포넌트 내부에서 발생하는 연산을 최저고하 할 수 있다
  - 렌더링 과정에서 특정 값이 바뀌었을때만 연산을 실행하고 원하는 값이 바뀌지 않았다면 이전 연산했던 결과를 다시 사용하는 방식이다
```
mport React, { useCallback, useMemo, useRef, useState } from "react";

const getAverage = (numbers) => {
  console.log("평균값 계산중...");
  if (numbers.length === 0) return 0;
  //reduce는 매개변수가 2개 이고 반환 값이 한개이다
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};
const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState("");
  const inputEl = useRef(null);

  const onChange = useCallback((e) => {
    setNumber(e.target.value);
  }, []);

  const onInsert = useCallback(() => {
    //input에 value값이 입력과 동시에 숫자로 변환
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber("");
    inputEl.current.focus();
  }, [number, list]); //number 혹은 list가 바뀌것을때만 함수 생성

  const avg = useMemo(() => getAverage(list), [list]);
  return (
    <div>
      <input value={number} onChange={onChange} ref={inputEl} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균값 : </b> {avg}
      </div>
    </div>
  );
};

export default Average;
```
- useCallback
  - 렌더링 성능을 최적화 해야 하는 상황에서 사용
  - 이전에 만들어 놨던 함수를 재사용 할 수 있다
  - 코드
  - constr onChange = useCallback(e=>{...},[number, list]);
  - useCallback에서 첫번쨰 파라미터에는 생성하고 싶은 함수를 넣고 두 번째 파라미터에는 배열을 넣으면 된다 위 코드 내용 처럼 하면 인풋 내용이 바뀌너 새로운 항목이 추가될 때 새로 만들어진 함수를 사용하게 된다
- useRef
  - input의 값을 입력하고 버튼을 눌렀을때 ref로 input에 focus를 줄 수 있다
  - 코드
  - const inputEl = useRef(null); const onInsert = useCallback(() => { //input에 value값이 입력과 동시에 숫자로 변환 const nextList = list.concat(parseInt(number)); setList(nextList); setNumber(""); inputEl.current.focus(); }, [number, list]); //number 혹은 list가 바뀌것을때만 함수 생성 <input value={number} onChange={onChange} ref={inputEl} />
- 커스텀 Hook
컴포넌트 스타일링

'React' 카테고리의 다른 글

React #6 (0)	2023.05.11
React #5 (0)	2023.05.10
React #3 (0)	2023.05.08
React #2 (0)	2023.05.04
React #1 (0)	2023.05.03

ABOUT ME

DGeon DGeon

'React' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'React' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바