IT & Tech

https://simsimjae.tistory.com/382

브라우저의 렌더링 과정: parse -> layout -> paint -> composite(paint과정에서 나눠진 레이어들을 합침)

jQuery나 js로 직접 DOM에 접근해서 수정하면 매번 reflow (layout -> paint -> composite)이 일어나며 이는 렌더링 과정에서 대부분의 시간을 잡아먹는 작업이므로 비효율적

리액트는 업데이트가 필요한 UI컴포넌트를 하나씩 수정하지 않습니다. 리액트 컴포넌트가 리턴한 JSX를 해석해서 Virtual DOM에 그리고, 이것을 모든 컴포넌트에 대해서 반복합니다. 전부 다 그렸으면 실제 DOM과 비교해서 변경된 부분만 변경시켜주는것이죠. 어떻게 보면 조삼모사처럼 보일수도있습니다. 한번에 하나씩 변경시킬것인가? 아니면 모아서 한번에 처리할것인가? 근데 후자의 방법이 더 좋은 방법입니다. 왜냐면, 모아서 한번에 처리하면 리플로우는 딱 한번 일어나기 때문에 브라우저의 리소스를 덜 사용하기 때문입니다.

유저와의 상호작용이 많아서 서버에서 데이터를 가져와서 UI에 그 데이터를 묶어서 보여줘야 하는 경우가 많은 서비스에서는 리액트가 훨씬 개발하기 편하고 빠릅니다. 

DOM관리를 리액트가 알아서 편리하게 해주기 때문이죠. 저희는 그저 데이터와 UI 컴포넌트를 묶어주기만 하면 됩니다. 직접 DOM에 접근할 필요가 없어요.

출처: https://simsimjae.tistory.com/382 [104%:티스토리]

state들이 한꺼번에 변화하고 같은 성질을 가진다면 아래와 같이 destructuring assignment를 통해 묶어서 사용

화면에 나타나는 변화하는 값들을 state로 사용하되 변화가 한꺼번에 일어나는 것이라면 하나의 state로 묶어서 사용

const [inputs, setInputs] = useState({ username: "", email: "" });
const { username, email } = inputs;

위와 같이 사용하면 inputs.username이렇게 매번 inputs.붙이지 않아도 됨

inputs[name] = value; (x)

setInputs({ (o)
  ...inputs,
  [name]: value
});

세팅할때는 위와 같이 해야함

리액트 컴포넌트는 기본적으로 부모컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링이 됩니다. 바뀐 내용이 없다 할지라도요.

물론, 실제 DOM 에 변화가 반영되는 것은 바뀐 내용이 있는 컴포넌트에만 해당합니다. 하지만, Virtual DOM 에는 모든걸 다 렌더링하고 있다는 겁니다.

나중에는, 컴포넌트를 최적화 하는 과정에서 기존의 내용을 그대로 사용하면서 Virtual DOM 에 렌더링 하는 리소스를 아낄 수도 있습니다. 이것은 다음번에 알아볼게요. -> useCallback, React.memo 사용

아래와 같이 component를 React.memo로 감싸주고 useCallback사용해야함

export default React.memo(CreateUser);

https://react.vlpt.us/basic/19-React.memo.html

어떤 컴포넌트에 a,b,c,d,....등 많은 state가 있고

어떤 값 (m)은 a의 유효 count를 세는 등 a가 바뀔때만 영향받는 값

const countActiveList = (a) => a.filter(n => n.active).length;

const count = countActiveList (a);

그냥 위와 같이 쓰면 a, b, c, d 각각이 바뀌어도 virtualDOM 리렌더가 일어나며 리렌더될때마다 m값은 매번 새로 계산됨

이것을 방지하기 위해 useMemo사용

const m = useMemo(()=> countActiveList (a),[a])

• 화면이 랜더링될때마다 일반 변수는 계속 초기화되는데, 기억해 두어야 할 필요가 있을 때 사용
• 기억해야 하는 값이긴 하지만 화면에 직접 나타나진 않을 때 useState대신 useMemo사용

useMemo가 값 재사용이라면 useCallback은 함수재사용

const onRemove = id => {
  // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
  // = user.id 가 id 인 것을 제거함
  setUsers(users.filter(user => user.id !== id));
};

=>

const onRemove = useCallback(
    id => {
      // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
      // = user.id 가 id 인 것을 제거함
      setUsers(users.filter(user => user.id !== id));
    },
    [users]
  );

local/sessionStorage: web storage object

localStorage.setItem(key,value)해주면, React.useEffect(()=>{...},localStorage.getItem(key))로 수정감지 가능함 

useEffect(setup, dependencies?)에서 dependencies?는 state, props뿐 아니라 관련된 모든 variables와 functions 사용가능 (출처:https://react.dev/reference/react/useEffect)

local storage는 domain,protocol,port로 정의되는 origin에 묶여있음

origin(domain/port/protocol)만 같다면 url 경로는 달라도 동일한 결과, localStorage는 동일한 오리진을 가진 모든 창에서 공유되기 때문입니다. 따라서 한 창에 데이터를 설정하면 다른 창에서 변동 사항을 볼 수 있습니다.

sessionStorage는 origin + 동일 tab내에서만 유효

storage 이벤트

localStorage나 sessionStorage의 데이터가 갱신될 때, storage 이벤트가 실행됩니다. storage 이벤트는 다음과 같은 프로퍼티를 지원합니다.

• key – 변경된 데이터의 키(.clear()를 호출했다면 null)
• oldValue – 이전 값(키가 새롭게 추가되었다면 null)
• newValue – 새로운 값(키가 삭제되었다면 null)
• url – 갱신이 일어난 문서의 url
• storageArea – 갱신이 일어난 localStorage나 sessionStorage 객체

여기서 중요한 점은 storage 이벤트가 이벤트를 발생시킨 스토리지를 제외하고 스토리지에서 접근 가능한 window 객체 전부에서 일어난다는 사실입니다.

좀 더 구체적으로 설명을 이어나가 보겠습니다.

두 개의 창에 같은 사이트를 띄워놨다고 가정해봅시다. 창은 다르지만 localStorage는 서로 공유됩니다.

실제 본 페이지를 두 개의 브라우저 창에 띄워 봅시다.

두 창에서 모두 storage 이벤트를 수신하고 있기 때문에 한 창에서 아래 예시를 실행해 데이터를 갱신하면 다른 창에 해당 사항이 반영되는 것을 확인할 수 있습니다.

// 문서는 다르지만, 갱신은 같은 스토리지에 반영됩니다.
window.onstorage = event => { // window.addEventListener('storage', () => {와 같습니다.
  if (event.key != 'now') return;
  alert(event.key + ':' + event.newValue + " at " + event.url);
};

localStorage.setItem('now', Date.now());

storage 이벤트의 또 다른 중요한 특징은 event.url이 있어 데이터가 갱신된 문서의 URL을 알 수 있다는 점입니다.

또한 event.storageArea에는 스토리지 객체가 포함되어 있는데, storage 이벤트는 sessionStorage나 localStorage가 변경될 때 모두 발생하기 때문에 event.storageArea는 스토리지 종류에 상관없이 실제 수정이 일어난 것을 참조한다는 것 역시 중요한 특징입니다. 변경이 일어났을 때 우리는 event.storageArea에 무언가를 설정해 '응답’이 가능하도록 할 수 있죠.

출처: https://ko.javascript.info/localstorage

react node

<FormattedMessage> 사용하려면 IntlProvider를 윗단에서 아래와 같이 제공해줘야 함

import { IntlProvider } from "react-intl";
import enUsMsg from "./lang/en-US.json";
import koMsg from "./lang/ko.json";
import Page from "./Page";

const locale = localStorage.getItem("locale") ?? "ko";
const messages = { "en-US": enUsMsg, ko: koMsg }[locale];

function App() {
  return (
    <IntlProvider locale={locale} messages={messages}>
      <Page />
    </IntlProvider>
  );
}

import { FormattedMessage } from 'react-intl';

<FormattedMessage id={'user.table.tool.total'}/> //총 사용자 : {total}
<FormattedMessage id={'user.table.tool.total'} values={{total: 1000}}/> //총 사용자 : 1000, values는 넘겨주는 변수지정
<FormattedMessage id={'user.table.tool.total'} defaultMessage='notFound' /> //id에 해당하는 번역어 없을때, defaultMessage나옴 defaultMessage없으면 id가 나옴

ui에 나타날때  padding 위아래 10 차지함 

String

String으로 쓰려면 useIntl이나 ingetIntl로 intl객체를 props로 받아와서 intl.formatMessage({id:...}) 형태로 사용해야함

import {injectIntl} from "react-intl";

const title = intl.formatMessage({id: 'index.portal.title'});

export injectIntl(...);

react component에는 2가지 종류가 있다 - 클래스형, 함수형

• 아래 예시에서 보다시피 클래스형은 함수형보다 코드 길이가 더 길고 복잡
• 함수형은 클래스형보다 메모리 자원도 덜 차지한다고 함 (왜??)
• 그렇지만 함수형은 별도의 state나 lifecycle 정의를 할 수 없었기 때문에 간단한 용도로만 사용되었으나,
• 2019년 리액트 버젼16.8부터 추가된 hook으로 인해 함수형이 클래스형보다 많이 쓰이게 되었음
• 클래스형은 안쓴지 오래되서 이제 어떻게 쓰는지도 잘 모르겠음 (클래스형 https://devowen.com/298 참고하자)

class component

class Classcomp extends React.Component {
    state = {...};
    render(){
    	return(
        	<div className="containter>...</div>
        );
    }
}

function component

function FunctionComp(props){

	return (<div>...</div>);

}

* react-calendar-timeline

https://reactjsexample.com/a-modern-and-responsive-react-timeline-component/

https://github.com/namespace-ee/react-calendar-timeline

* react-timelines

https://github.com/JSainsburyPLC/react-timelines

* 10 Best React Libraries to Visualize Timelines

https://bashooka.com/coding/react-libraries-to-visualize-timelines/

* A modern and responsive React timeline component

https://reactjsexample.com/a-modern-and-responsive-react-timeline-component/

• useState
• useEffect
  • react component가 rendering될때마다 특정작업 수행하도록 설정
  • componentDidMount + componentDidUpdate
    • 화면에 처음 렌더링될 때만(마운트될때만) 실행: useEffect(  ()=>{실행할일}, []  );
    • 특정값이 업데이트될때만 실행: useEffect(  ()=>{실행할일}, [name]  );
• useContext
• useReducer
• useMemo
  • 불필요한 연산 반복하지 않도록 연산을 최적화
  • 매번 렌더링할 때마다 연산하지 않고 특정값이 바꼈을때만 연산하도록 지정
• useCallback
  • useMemo와 비슷
  • 함수를 반환하는 상황에서 더 편하게 사용가능
• useRef
  • https://parkdream.tistory.com/117

https://velog.io/@velopert/react-hooks

1. 리액트가 정적으로 렌더링된 (SSR 또는 pre-rendered) HTML 컨텐츠로부터 컴포넌트 트리를 재구성함
2. 마찬가지로 정적으로 Persist된 리덕스 스토어 등을 런타임 상태로 재구성함

어감에서 할 수 있듯이 동적이였던 무언가를 정적인 상태로 저장해두었을 때, 이를 다시 원상태로 돌리는 행위를 뜻합니다.

주로 1번을 hydration, 2번을 rehydration이라고 칭하는데 (그냥 혼용함) 이 중 1번은 리액트 웹에서만 필요한 부분이라 리액트 네이티브에는 해당이 없습니다.

--------------------------------------

Plane Text 형태로 존재하는 state를 읽어들이는 행위?

다 이해는 못했지만 SSR(server side sendering),CSR(client side rendering), 서버에서 응답받아 웹페이지가 나오기 까지 일어나는 일련의 과정, 여기에서 hydrate는 메말랐던 정적인 내용이 수분으로 채워주며 동적으로 바뀌게 해주는 의미라는 설명 등이 잘 나타나있음

https://simsimjae.tistory.com/389