프론트엔드/React.js(9)
-
[React] 리렌더링Re-rendering
Re-rendering in React observing virtual DOM and change the real DOM from virtual DOM to real DOM 출처: https://aboveimagine.tistory.com/101 [비전공자의 IT 취업이야기:티스토리] 리액트에서 컴포넌트가 리렌더링이 되는 조건 본인이 가진 state에 변화가 생겼을 때 부모 컴포넌트가 리렌더링되었을 때 내려받은 props가 변경되었을 때 컴포넌트 최적화 useMemo React Hooks, 컴포넌트 내부에서만 사용 가능 함수가 아닌 값을 반환 값을 메모이제이션 React.memo HOC,고차 컴포넌트 강화된 컴포넌트를 반환함 컴포넌트를 메모이제이션 useCallback 메모이제이션된 콜백을 반환
2022.07.27 -
[React] Props
Props Definition 컴포넌트 속성을 설정할 때 사용하는 요소 Properties의 줄임말로, 부모 컴포넌트의 데이터를 자식 컴포넌트에게 전달할 때 사용하는 단일 객체 전달된 후에는 변수를 통해 접근이 가능함 HTML요소는 속성을 가지고 있고, React 컴포넌트는 props를 가지고 있다. prop="value" (HTML 속성과 동일한 구문) 특징 단방향unidirectional (부모→자식) readonly defaultProps : 기본값 설정 Hello.defaultProps = { name: '이름없음' } props.children : 태그 사이의 내용을 보여줌 리액트 // '리액트' 부분 비구조화할당(구조분해할당) 참고 : 구조 분해 할당 var a, b, rest; [a, b] ..
2022.06.16 -
[React] 리액트 개요, node.js와 npm, 렌더링Rendering, JSX
React 시작하기 개요 목적 : 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축 리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행합니다. virtual DOM 사용하여 js 객체를 구성, 실제 DOM의 가벼운 사본 느낌 업데이트 처리 간결성 프레임워크 X 라이브러리 O → 뷰 이외의 기능은 다른 라이브러리 사용 ex) react-router Node.js, npm 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임 리액트는 웹브라우저에서 실행되어 직접 연관은 없으나, 프로젝트 개발에 필요한 주요도구가 Node.js를 사용 ECMAScript 6를 호환시켜 주는 바벨(babel) 모듈화된 코드를 한 파일로 합치고(번들..
2022.06.02