wintertreey 님의 블로그

출력될 내용 노란 네모박스에 의해 ref 하는 컴포넌트가 결정된다. index는 기본적으로 0부터 시작. 출력시 1부터 시작을 원하기에 +1을 해주었다.  v-modelVue.js에서 양방향 데이터 바인딩을 제공하는 디렉티브사용자가 입력한 데이터가 Vue 인스턴스의 데이터와 자동으로 동기화되도록 도와준다. 체크박스와 selectedBooks 배열 사이의 데이터 바인딩을 처리하는 데 사용된다. 체크박스가 선택되면 selectedBooks 배열에 해당 책 객체가 추가되고, 체크박스가 선택 해제되면 배열에서 제거된다.  하단은 메소드 및 뷰 선언 컴포넌트의 초기상태와 로직을 설정해준다.ref와 reactive를 사용해 반응형 상태를 정의해준다.  ref반응형 데이터로 동작한다. 컴포넌트에서 변경될 때 자동으로..

VueReact에 비해 가볍고 빠르게 개발이 필요한 경우 선호.최신 릴리즈로 시작한 프레임워크(2014년).Virtual Dom 활용으로 양방향 바인딩 처리 등 가능.(proxy를 이용하여 변경된부분만 반영한다. like React)  MVVM 패턴이란? 마크업 언어나 GUI 코드를 비지니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 아키텍처 패턴을 말한다.어플리케이션 로직과 UI를 분리하기 위해 설계된 패턴으로, UI를 가지는 응용 프로그램을 위한 아키텍처 패턴. 특징MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지고 있다.뷰와 모델 사이의 양방향 데이터 바인딩을 지원한다.UI를 별도의 코드 수정 없이 재사용할 수 있다.단위 테스트등의 작업이 쉽다.  MVVM은 Model..

에러발생 npm : 'npm' 용어가 cmdlet, 함수, 스크 립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정 확한지 확인하고 경로가 포함된 경우 경 로가 올바른지 검증한 다음 다시 시도하 십시오. 위치 줄:1 문자:1 + npm install react-router-dom + ~~~ + CategoryInfo : ObjectN otFound: (npm:String) [], Command NotFoundException + FullyQualifiedErrorId : Command NotFoundException   시도1https://velog.io/@bey1548/npm-npm-%EC%9A%A9%EC%96%B4%EA%B0%80-cmdlet-%ED%95%A8%EC%88%..

import React from "react";class Clock2 extends React.Component{ constructor(props){ super(props) this.state = {date:new Date()} //state를 생성자에서 지정 } //Mount: DOM 객체가 생성되고 브라우저에 나타나는 것 //호출순서: constructor> getDerivedStateFromProps> render> componentDidMount showSigan(){ this.setState({ date:new Date() }) } componentDidMount(){ //시스템에 의한 ..

이번 기회에 부트스트랩을 도입해보려고 한다. 리액트에서는 쉽게 부트스트랩 css 파일을 통한 적용이 가능하다.  1. 부트스트랩 설치터미널에 다음 명령어를 사용하여 부트스트랩을 설치한다. npm install bootstrap 2. 부트스트랩 CSS 파일을 importsrc/index.js 또는 src/App.js 파일에 다음을 추가하여 부트스트랩 CSS 파일을 import한다.이때 다른 파일에는 굳이 import 를 해주지 않아도 된다.  import 'bootstrap/dist/css/bootstrap.min.css';  3. 그다음 부트스트랩 사이트를 참고하여 각 태그의 className에 소스를 추가해주면된다. 라우터 연습을 하면서 확인해보자. App.jsimport React from "rea..

라우터란?사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각하면 된다. 리액트에서는 라우팅 관련 라이브러리가 많은데, 이중 가장 많이 쓰이는 React Router 활용. 리액트는SPA (Single Page Application) 방식 - 기존 웹 페이지 처럼(MPA 방식) 여러 개의 페이지를 사용, 새 페이지를 로드하는 방식이 아니다. - 새 페이지를 로드 하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리라고 할 수 있다. 라우터를 사용하기 전에 설치해줘야한다. 터미널에서 다음과 같이 명령문을 적어주자. np..

텍스트에 값 입력하여 투두리스트를 띄워보자. 간단한 설명은 코드 옆에 주석으로 달아두었다. import React, {useState} from "react";function TodoList({items}){ //할일목록 출력용 return( {items.map((item) => ( // items 배열을 순회하며 각 항목을 리스트 요소로 렌더링 {item.text} ))} );}function App() { const [items, setItems] = useState([]);// 할 일 목록을 관리하는 상태 const [text, setText] = useState('');// 입력 필드의 현재 값을 관리하는 상태 const handl..

React.memo() React는 먼저 컴퍼넌트를 렌더링(rendering) 한 뒤, 이전 렌더된 결과와 비교하여 DOM 업데이트를 결정한다. 만약 렌더 결과가 이전과 다르다면, React는 DOM을 업데이트한다. 컴퍼넌트가 React.memo()로 래핑 될 때, React는 컴퍼넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다. 메모이징 한 결과를 재사용 함으로써, React에서 리렌더링을 할 때 가상 DOM에서 달라진 부분을 확인하지 않아 성능상의 이점을 누릴 수 있다. 언제 React.memo()를 써야할까같은 props로 렌더링이 자주 일어나는 컴퍼넌트.React.memo(..