컴포넌트
-
[리액트 기초] 컴포넌트, 클래스형 컴포넌트, 함수형 컴포넌트, props, 구조분해, state,useStateReact/기초 2023. 3. 13. 13:30
컴포넌트 리액트로 만들어진 앱을 이루는 최소한의 단위 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 예시 ) App.js import TodoTemplate from "./TodoTemplate"; 클래스형 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 함수형 컴포넌트 const Welcome = ({props}) => { return Hello, {props.name}; }) 클래스형 컴포넌트와 함수형 컴포넌트 차이 클래스형 컴포넌트 함수형 컴포넌트 render 함수 필요하고 JSX 반환 return문으로 실행 후 사라..
-
컴포넌트 심화 학습 - 부모 컴포넌트, 자식 컴포넌트Vue.js 2022. 9. 1. 22:51
컴포넌트 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미합니다. 화면을 여러 영역으로 쪼개서 활용할 수 있는 형태로 관리하여 코드를 재사용할 수 있어 사용합니다. 부모 컴포넌트란? 상위 컴포넌트와 동의어이며, 컴포넌트를 등록한 것 import childComponent를 입력된 컴포넌트 자식 컴포넌트란? 하위 컴포넌트와 동의어이며, props로 부모 컴포넌트로 전달받은 데이터를 저장한다. 부모 컴포넌트에서 자식 컴포넌트의 데이터 옵션 값 직접 변경하기(실습) 1. src/views/ChildComponent.vue를 생성해주고 아래 코드를 입력합니다. click 2. src/views/ParentComponent.vue를 생성해주고 아래 코드를 입력합니다. 3. src/router/index.js..