wintertreey 님의 블로그

리액트에서 ajax요청 +  spring에서 결과 보내주기(json)db작업create table memrest(num int primary key auto_increment, name varchar(10), addr varchar(50)); insert into memrest(name, addr) values('신기해', '강남구 역삼1동 123번지'); insert into memrest(name, addr) values('고소해', '강남구 역삼2동 13번지'); 백엔드 서버사이드 스프링작업 application.yml  application.yml은 application.properties 와 같은 일을 하는 파일로, 선택적으로 적용가능하다.yml은 properties와 다르게 겹치는 앞부분은 적..

에러발생 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(..

Props컴포넌트에서 사용하는 데이터는 props와 state가 있다.  props 부모 컴포넌트가 자식 컴포넌트에 주는 값. 넘겨줄 수 있는 값은 변수, 배열, 객체, 함수 등 자바스크립트 요소 모두 가능하다. 단, props는 읽기전용으로 값이 변경되어서는 안 된다. props의 값을 변경하고 싶다면, props를 직접적으로 변경하는 것이 아닌 새로운 변수를 선언하여 사용한다. 또한, 데이터는 부모요소에서 자식요소로만 전달이 가능하다.  stateState는 컴포넌트의 내부에 현재 저장된 값이며, 변할 수 있는 값이다. 리액트는 값이 변경된 부분을 인지하고 그 부분만 재렌더링한다.  정리Props는 컴포넌트에 전달하는 값으로, 직접 수정 불가능하다State는 컴포넌트 내부에서 선언되어 관리되는 값으로..