기록해봅니다 💬

less than 1 minute read

React

자바스크립트 라이브러리로 SPA 을 전제로 하고있으며 컴포넌트 단위로 개발하기에 적합한 라이브러리이다.


  • React의 생명주기
    • 리액트 생명주기는 마운팅, 업데이팅, 언마운팅 세가지로 이루어져있다. 마운팅 단계에서는 돔에 노드를 추가하는 작업이 이루어진다. 이 단계는 state 공간에 변수 값을 초기화 할때가 해당된다. 업데이팅 단계에서는 컴포넌트 내에서 변화가 생겼을때이다. 해당 컴포넌트의 state 값이 변화할때가 해당한다. 언마운팅 단계는 컴포넌트 내에서 돔을 제거할때다. useEffect는 clean-up함수가 이에 해당한다.
    • (함수형 컴포넌트에서는 훅을 이용한다.)
  • useState setState 사용하는 이유
    • state 를 직접적으로 변경할 경우 화면상은 변할수도 있지만 리렌더링이 일어나지 않기 때문에 setState 를 사용해야 react 가 state 변경되었다는 것을 알수 있게 해주기 때문에 setState 를 사용해야 한다.

Updated:

You may also enjoy

[performance] 성능 최적화 bundle 파일 분석

1 minute read

Bundle 파일 분석을 해보쟈 개발자 도구 Performance탭에서 보면 아래 사진처럼 chunk 파일에 시간이 오래 소요되는 것을 확인할 수 있다. 이것들이 다운받아져야 다른 js 파일들이 로드되기 때문에 화면에 요소가 나오는 시간에 영향을 미친다. 그렇다면 저 파일은 왜 저...

[performance] 성능 최적화 bottleneck 코드 최적화

less than 1 minute read

Performance 탭 확인하기 개발자 도구 Performance를 확인해보쟈. HTML이 파싱되고 JS가 실행되고 코드가 실행되는데 Article 부분에서 실행 시간이 많이 소요되는 것을 볼 수 있다. 특히 removeSpecialCharacter 부분이 반복되며 실행되는데 코...

[performance] 성능 최적화 이미지 최적화

1 minute read

Performance Optimization - 성능 최적화 성능 최적화? 필요한 이유는 무엇일까욥 페이지가 로딩되는 속도가 느릴수록 사용자의 이탈률이 늘어날 것이다 → 수익이 감소한다, 즉 성능 최적화로 페이지 로딩 속도를 줄여 사용자가 떠나지 않도록 해서 수익을 증대할 수 있...

[javascript] 이벤트 루프에서 비동기까지

2 minute read

자바스크립트의 이벤트 루프에 대해 알아보다가 결국 비동기까지 알아보게 되었다. 자바스크립트는 싱글 스레드 언어이다. 이것은 싱글 callStack을 가지고 있다는 의미로 해석되는데 이는 자바스크립트 엔진의 특성이기도 하다. 싱글 스레드라는 것은 어떻게 동작한다는 것일까?