컴포넌트가 다시 렌더링되더라도 기존 상태값을 유지하는 변수를 생성함수 내부에 정의하는 지역 변수는 컴포넌트가 다시 렌더링되면(함수 재호출) 값이 초기화 됨useState는 값이 변경되면 컴포넌트가 다시 렌더링되지만 useRef는 값이 변경되어도 컴포넌트가 다시 렌더링되

컴포넌트 생명주기 이벤트를 등록하기 위한 훅클래스 기반 컴포넌트에서는 componentDidMount(),componentDidUpdate(),componentWillUnmount() 메소드를 오버라이드 해서 구현해야 함함수 컴포넌트에서는 useEffect에서 구현 가

리액트를 처음 배우기 시작하면, 코드가 언제 실행이 되는 건지, 렌더링은 왜 여러 번 일어나는 건지 이해하기가 어렵게 느껴지기도 합니다. 그래서 리액트 컴포넌트의 생성되고, 업데이트되고, 사라지기까지의 흐름을 정리해 보겠습니다.컴포넌트 생명주기(이미지 출처 - 멋쟁이사

1. ES6 화살표 함수 화살표 함수는 함수 표현식의 대안으로 간결하게 함수를 정의할 수 있으며, 익명 함수로도 정의가 가능하다. 실행할 코드가 하나만 있다면, 함수 본문의 중괄호 생략이 가능하며 함수의 코드가 자동으로 리턴값으로 사용된다. 매개 변수가 하나만 있다면

개발을 배우다 보면 ‘동기’와 ‘비동기’라는 말을 한 번쯤은 들어봤을 것이다. 오늘 수업에서 이 내용을 배웠기 때문에, 배운 내용을 나만의 방식으로 다시 설명해보려 한다.우선, 아래와 같은 HTML 마크업과 4개의 스크립트가 있다고 가정해보자.코드예시html 마크업 내

노드 찾기에 대해 알아보기 전에 DOM에 대해 먼저 알아보자.브라우저가 HTML 문서를 객체의 트리 구조로 표현한 모델(부모-자식 관계로 연결된 계층 구조)브라우저는 웹서버에서 다운로드 받은 텍스트 기반의 HTML문서를 파싱하면서 HTML 문서의 각 구성 요소를 트리

수업 중 강사님께서 Reflow와 Repaint에 대해 언급하셨고, 이에 대해 자세히 공부해보라는 말씀에 이번 기회에 브라우저 랜더링에 대해 알아 보았습니다.

예전에 Git을 제대로 공부하지 않고, 특히 Branch의 개념을 제대로 이해하지 않고 GitHub에 디렉토리를 Push하려다가 실패한 적이 있었다. 그때 Branch에 대해 다시 공부를 하면서 origin과 main(master)의 차이를 알게되었다.