본문 바로가기

분류 전체보기

(57)
React에서 State, Props, 리렌더링 발생 조건 및 성능 최적화 React 애플리케이션에서 State와 Props를 사용하여 컴포넌트를 관리하며, 불필요한 리렌더링을 최소화하기 위해 다양한 최적화 전략을 사용할 수 있다. 렌더링 발생 조건을 이해하고 적절한 최적화 기법을 적용함으로써 애플리케이션의 성능을 개선할 수 있다. State 컴포넌트의 동적 데이터 관리를 위한 객체 클래스 컴포넌트에서는 this.state를 사용하며, 함수형 컴포넌트에서는 useState 훅을 사용 상태 변경 시 setState 메서드나 useState의 setter 함수를 사용하여 변경 Props 부모 컴포넌트로부터 전달받은 속성 컴포넌트 간의 데이터 전달과 상호작용을 위해 사용 읽기 전용으로, 자식 컴포넌트에서 직접 수정할 수 없음 리렌더링 발생 조건 State의 변경: 컴포넌트의 내부 상..
React Component -2 1. HOCs(Higher-Order Components) : 다른 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수. 기능이나 상태를 재사용하는데 도움이 되며 코드의 중복을 줄이고 유지보수를 용이하게 할 수 있다. 일반적으로 공통 로직을 캡슐화하고 이를 다양한 컴포넌트에 적용할 수 있다. function withHOC(WrappedComponent) { return class extends React.Component { render() { return ; } }; } 2. Render Props: 하위 컴포넌트에게 어떻게 렌더링할지 결정할 수 있는 함수를 전달하는 패턴. 컴포넌트 간의 상태 공유와 기능 재사용을 가능하게 한다. Render Props를 사용하는 컴포넌트는 자식 요소로 함수를 전달..
React Component React Component에는 다양한 컴포넌트 패턴과 기술이 사용된다. 1. 부모- 자식 컴포넌트 2. HOCs(Higher-Order Components 3. Render props 4. Context API 5. Hooks 오늘은 위와 같은 대표적인 것들 중에서 부모-자식 컴포넌트에 대해서 공부해보았다. 부모 - 자식 컴포넌트 컴포넌트 내에 다른 컴포넌트를 품을 수 있는 것. 계층적 구조 : 부모 컴포넌트는 하나 이상의 자식 컴포넌트를 포함할 수 있음. 이때 자식 컴포넌트는 다른 컴포넌트의 부모가 될 수 있음. 단방향 데이터 흐름 : 일반적으로 단방향 부모 → 자식 컴포넌트에게 데이터 전달 가능 이를 "props"라고 함. 자식 컴포넌트는 이를 읽기 전용으로 사용할 수 있다. 단, 자식 컴포넌트가 ..
Virtual DOM, props, state Virtual DOM (가상 돔): Virtual DOM은 실제 DOM(Document Object Model)의 가벼운 메모리 상의 표현입니다. DOM은 웹 페이지의 구조화된 표현으로, HTML, XML, SVG 문서의 객체 기반 표현입니다. Virtual DOM은 실제 DOM을 빠르게 조작하고, 렌더링 성능을 향상시키기 위한 목적으로 사용됩니다. React에서는 웹 페이지의 변경 사항을 가상 DOM에 먼저 적용한 후, 실제 DOM과 비교하여 변경된 부분만 업데이트합니다. 이 과정을 'Reconciliation'이라고 하며, 이를 통해 성능을 최적화하고 불필요한 업데이트를 줄입니다. Props (속성): Props는 React에서 사용되는 입력 매개 변수의 줄임말입니다. React 컴포넌트는 재사용 가..
주특기 주차 개인과제 Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을 취소, isDone이 false 이면 라벨을 완료 로 조건부 렌더링 되는지가 어려웠다. 겨우겨우 구글링 해가면서 했다... 삭제 버튼은 토이프로젝트를 할 때 했던 기능을 구현했던 경험이 있어서 비교적 쉽게 할 수 있었다...
배열/객체 비구조화 객체의 비구조화(구조분해 할당) // person 객체 안에 있는 값들이 구조가 해제되어 각각 변수에 할당됩니다. const person = { name: '갑돌', age: '27' } const { name, age } = person; console.log(`${name}님, ${age}살이시네요!`); const person = { name: '갑돌', age: '27' } function hello({name, age}) { console.log(`${name}님, ${age}살이시네요!`); } hello(person); 배열의 비구조화(구조분해 할당) // 객체에서의 케이스와 마찬가지로 배열도 구조분해 할당이 이루어짐 const testArr = [1, 2, 3, 4, 5]; const [v..
HTML,CSS,JavaScript의 기본 개념과 특징은 무엇인가? HTML의 개념과 특징 개념 HyperText Markup Language의 약자로 웹 페이지의 구조를 정의하는 마크업 언어. 웹 페이지의 내용을 표현하는데 사용되며, 태그를 이용해 문서의 구조를 표현. 헤더, 텍스트, 이미지, 리스트, 링크 등을 표현할 수 있다. 특징 구조화된 문서 HTML은 웹 페이지의 구조를 구성하는 마크업 언어로, 여러 태그를 사용하여 문서의 구조를 표현한다. 각 태그는 서로 다른 의미와 기능을 가지고 있으며, 웹 페이지의 헤더, 본문, 링크, 이미지 등을 표현할 수 있다. 플랫폼 독립적 HTML은 여러 웹 브라우저와 운영체제에서 호환되는 플랫폼 독립적인 언어이다. 이는 웹 개발자가 다양한 환경에서 동일한 결과를 보장할 수 있게 해준다. 간결한 문법 HTML은 직관적이고 간결한 ..
ES- ES5와ES6의 문법 차이 ES란? ECMAScript"의 약자로, JavaScript의 표준화된 스크립트 언어를 의미한다. ECMAScript는 JavaScript를 포함한 여러 스크립트 언어의 기반으로, 이 표준에 따라 개발자들이 일관된 기능과 문법을 사용할 수 있다. ECMAScript는 주기적으로 업데이트되며, 각 버전에는 새로운 기능과 개선사항이 포함되어 있다. ES5와ES6의 문법 차이 변수 선언: ES5에서는 var 키워드를 사용하여 변수를 선언한다. ES6에서는 let과 const 키워드가 도입되어 블록 범위의 변수 선언이 가능해졌다. 화살표 함수: ES6에서는 화살표 함수(arrow function)가 도입되어 간결한 함수 표현이 가능해졌다. function 키워드를 사용하는 것보다 간편하며, this 바인딩이 자..