학습노트/React (14) 썸네일형 리스트형 [React] input 태그 infinite render in react. or re-render in react. 리액트에서 프로젝트를 진행하다보면 input태그를 사용하여 프로젝트를 분명히 진행하게 될 것이다. 하지만 하나의 component에 input 태그와 table 혹은 데이터를 보여주는 자료를 함께 넣다보면 input태그에 텍스트를 넣을 때 마다 component가 re-rendering 되는 현상을 겪을 수 있다. 그럴 때는 input component를 만들어서 따로 component를 불러와서 그려주는 방법이 바람직하다. 예를 들면 하나의 컴포넌트에서 작용하는 상황에서 아래에 있는 표를 스크롤 내려놓고 글을 쓰게되면 다시 컴포넌트가 리렌더링되어 글을 적을 때마다 표 스크롤이 다시 올라가는 현상을 확인할 수 있을 것이다. 하지만 컴포넌트를 따로 관리하게 되면 리렌더링 되는 현상을 막을 수 있다. ..... [React Hook] React Hooks란?, Lifecycle의 개념 React Hooks란? 간단하게 설명하자면 기존 React의 Class 활용한 Component 설정 방법을 개선한 것이다. 기존의 단점은 세 가지 정도로 꼽을 수 있다. 1. 계층이 너무 많아진다. 2. Component가 너무 복잡해진다. 3. Class를 Component로 쓰면 bind, this를 쓰는데 이 방식은 컴퓨터에게는 복잡한 작업을 수행하게 하고 사람에게는 혼란을 발생시킨다. 위 세 가지 단점을 종합해서 말하자면 가독성이 떨어진다고 할 수 있다. 따라서 react hook은 Class 형태였던 Component를 function을 통해 만들 수 있게 해주는 API이다. React Hook를 사용할 때에는 실질적으로 두 가지만 사용한다. useState()와 useEffect()가 바로.. [React] (12) Delete 기능 구현 (CRUD) - CRUD 구현된 github 이제 CRUD의 마지막 기능인 Delete 기능이 남았다. 우리는 이미 Control.js에 delete버튼을 만들어 놓았다. Control.js import React, { Component } from 'react'; class Control extends Component { render() { console.log('Control render') return ( create update ); } } export default Control; 그리고 App.js에서 Control 태그 부분을 이렇게 고치면 된다. 전체 App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import ReadContent.. [React] (11) Update 기능 구현 (CRUD) Update기능은 Create기능과 Read기능이 결합된 형태라고 볼 수 있다. 그래서 우선 components폴더 안에 UpdateContent.js를 만든다. UpdateContent.js import React, { Component } from 'react'; class UpdateContent extends Component { render() { console.log('UpdateContents render') return ( Update ); } } export default UpdateContent; 위 코드는 CreateContent.js에서 가지고 왔다. 그리고 App.js에 Import 시켜준다. refactoring (필수아님) getContent라는 함수를 만들어 조금 정리해준다... [React] (10) Create 기능 구현 (CRUD) - shouldComponentUpdate 설명 1. 누르면 mode가 변하는 작업 미리 진행되어 있는 작업에 components를 추가하려고 한다. components 파일의 하부에 Control.js를 만들어서 아래 코드를 삽입한다. import React, { Component } from 'react'; class Control extends Component { render() { console.log('Control render') return ( create update ); } } export default Control; 그리고 App.js에 아래처럼 Control을 넣어준다. {/* 자식 */} 코드를 적용하게 되면 아래 그림처럼 create와 update 그리고 delete가 생길 것이다. 각 버튼을 클릭하게 되면 mode가 바뀌는.. [React] (9) 이벤트 state, props, event 만들기, render function, bind 함수, setState 우리의 어플리케이션을 역동적으로 만들어주는 기술이 이벤트다. state, props, event 3개가 어울어져 만들어진다. react는 props나 state가 바뀌면 render 함수가 다시 호출된다. 따라서 그 render에 포함된 모든 것들이 다시 호출된다. App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content" import Subject from "./components/Subject" import './App.css'; class App extends Component { // render 함수보다 먼저 실행이되면서 초기화시.. [React] (8) Key - Warning: Each child in a list should have a unique "key" prop. 오늘은 State를 반복문으로 자동생성할 때 주어져야하는 key값이라는 것에 대하여 알아보겠다. 우선 아래 코드는 key값을 주지 않고 만든 반복문 데이터이다. this.state에 contents를 넣어주고 TOC에 data라는 값으로 this.state.contents를 넣어주었다. App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content" import Subject from "./components/Subject" import './App.css'; class App extends Component { // render 함수보다 먼저.. [React] (7) State 사용 앞에 State란 무엇인지 알아보았다. 이제 State를 사용하는 방법에 대해서 알아보자. 지금까지 만들었던 파일들 중에 App.js가 있을 것이다. 이곳에 state를 만들고 사용할 것인데 코드로 보면 알기 쉬울 것이다. App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content" import Subject from "./components/Subject" import './App.css'; class App extends Component { // render 함수보다 먼저 실행이되면서 초기화시켜주고 싶은 것은 constructor안에다.. [React] (6) State란 (props 와 state의 차이) State란? state를 이해하기 위해선 props와 비교해보는 것이 좋다. props state 사용자가 Component를 사용하는 입장에서 중요 props의 값에 따라 내부 구현에 필요한 데이터 (사용자가 알필요도 없고 알아서도 안된다.) 사용자가 조작하는 버튼 외부 조작버튼이 사용되기 위해 내부에서 조작되는 장치들 Props와 State는 철저하게 분리되어 있어야 한다. 양쪽의 편의성을 각자 도모하는 것이 좋다. props vs state [React] (5) React Developer Tools 사용방법 React Developer Tools는 React를 사용하기에 필수적으로 설치해야 하는 프로그램은 아니지만 React 개발자로서 다른 React 웹 사이트나 자신이 만든 React 웹 사이트의 Component를 쉽게 탐색할 수 있도록 돕는 프로그램이다. 설치방법 chrome 웹 브라우저의 웹 스토어에서 react developer tools를 탐색하여 찾는다. 사용방법 자신이 탐색하고 싶은 웹사이트에서 F12 또는 개발자도구에 들어가서 Components라는 탭을 클릭하여 아래 그림과 같이 Component를 찾을 수 있다. Component의 props까지 찾을 수 있고 직접 그 자리에서 값을 변경하여 넣어볼 수도 있다. [React] (4) Component 만들기 이번 포스팅에서는 Component를 제작하는 것을 설명할 것이다. 지난번 포스팅에서 App이라는 component를 제작했는데 이번엔 다양한 Component를 만들고 src/components에 넣어 사용하는 방법과 props라는 것에 대해서도 알아볼 것이다. 우선, src폴더에 components라는 폴더를 생성한다. 그리고 아래와 같이 세 가지의 파일을 만들고 코드를 넣는다. /src/components (새로 생성한 폴더) /Content.js import React, { Component } from 'react'; class Content extends Component { render() { return ( {this.props.title} {this.props.desc} ); } } ex.. [React] (3) 배포의 의미(Release, Deploy, Distribute)와 배포(Deploy)해보기 배포의 의미 프로그래밍에서 배포는 3가지의 단어로 나뉘어져있다. Release: 같은 제품을 새롭게 만드는 것(예: 새로운 버전을 배포, 새로운 아이피 번로 부여) Deploy: 프로그램 등을 서버와 같은 기기에 설치하여 서비스 등을 제공하는 의미 Distribute: 제품을 사용자들이 사용할 수 있도록 서비스 등을 제공하는 의미 이번 포스팅에서는 React를 Deploy하는 방법을 배워볼 것이다. 1. npm run build 아래 명령어를 입력하게 되면 build 파일이 생긴다 이곳에는 2장에서 여러개로 나뉜 파일들이 필요한 것들만 하나로 소스코드까지 줄여주면서 컴팩트하게 만들어준다. npm run build 알아보기는 힘들지만 이렇게 줄여준다. 2. nxp serve -s bulid 아래 명령어의 .. 이전 1 2 다음
