본문 바로가기

Client

 (40)
<리액트 기초> Ref와 포커싱 1. class 컴포넌트에서의 ref와 포커싱 * 함수 만들기 - 기존에 포커싱을 줄 때 했었던 방식이다. 임의의 변수를 선언하고 그것을 함수에서 이용하여 포커스를 주는 방식이었다. 아래에서 다시 살펴보자. // ... // this.inputRef.focus(); inputRef; onRefInput = (c) => { this.inputRef = c }; render() { ... } - 임의로 만든 함수는 렌더링되는 포커싱이 필요한 태그에 ref에 넣어주고, 이를 불러올 때에는 this.inputRef.focus()와 같이 불러온다. * createRef 사용하기 - 아래에서 다뤄보겠지만 hooks에서는 useRef를 이용한다. 이는 위 보다 덜 복잡하지만 current가 위에서 추가된다. crea..
<리액트 기초> 렌더링 최적화 * 리액트 개발자 도구 - 리액트로 개발을 한다면 React Developer Tools는 필수이다. 컴포넌트와 props를 바로바로 확인할 수 있고, 디버깅을 더 편하게 해준다. - 크롬 웹 스토어에서 react를 검색한 후 개발자 도구를 설치하자. - 설치가 완료되면 리액트가 사용된 사이트에서 개발자 도구(f12)를 열어서 리액트와 관련된 도구들을 사용할 수 있다. - 리액트 개발자 도구는 렌더가 되는 것을 실시간으로 확인을 하게 해준다. 이 기능은 톱니바퀴 버튼에서 Highlight update를 체크하면 된다. - 이를 보기위해서 state에서 counter를 0으로 두고 온 클릭 함수에 setState({}) 를 입력해서 아무 일도 일어 나지 않도록 했다. 그 후 버튼을 클릭하면 다음과 같이 화..
<리액트 기초> map과 props 1. map * 1차원 배열 - map은 리액트에서 반복문을 쓸 때 아주 좋은 방법이다. - 사용법은 배열을 미리 만들고 map메서드를 불러오면 된다. {['가','나','다','라','마'].map( () => { return ( hi ); })} - map은 배열안의 원소들을 하나하나 돌아가면서 return결과로 바꾸는 방식이다. 여기서는 문자를 jsx태그로 바꾸고 있는 것이다. 입력과 출력의 갯수가 같음에 유의하자. 결과는 아래와 같을 것이다. hi hi hi hi hi - map 안에서 첫 번째 인자를 이용하면 배열안의 원소들을 받아오는 반복문이 가능하다. {['가','나','다','라','마'].map( (v) => { return ( {v} ); })} - map안에 첫 번째 인자 v를 넣어주..
<리액트 기초> import vs require * require - 우리는 지금까지 require로 모듈을 불러 왔다. const React = require('react'); const { Component } = React; - require은 노드의 모듈 시스템으로 module.export로 내보낸 것을 다른 곳에서 불러와서 쓰게 한다. - 구조분해 방식으로 작성한 부분은 exports되는 대상이 객체나 배열형태이면 사용 가능하다. * import import React, { Component } from 'react'; - import로 쓰게 되면 위처럼 한 줄로 깔끔하게 작성이 가능하다. - from뒤에는 파일의 경로를 작성할 수 있다. - import는 export default 로 내보낸 것을 불러올 수 있다. - 구조분해 방식으로 내보..
<리액트 기초> 코드 개선하기 * class의 constructor - hooks를 사용할 때를 제외하고 class방식에서 컴포넌트에 기본적으로 다음과 같이 작성하였다. const React = require('react'); const { Component } = React; class Practice extends Component { constructor(props) { super(props); this.state = { first: '', second: '', }; } render() { return ( 첫 번째 값 : {this.state.first} 두 번째 값 : {this.state.second} ); } } - 위에서 실제로는 constructor를 작성하지 않고 컴포넌트를 만들어도 상관없다. 이를 개선하면 다음과 같..
<리액트 기초> 웹팩 데브서버와 핫 리로딩 - 기존에는 소스코드를 고칠 때마다 다시 빌드를 진행했어야 했다. 하지만 이런 일은 매우 번거롭고, 자동으로 빌드가 되기를 원한다. - 그래서 이 장에서는 실시간으로 빌드가 되는 핫리로딩에 대해서 알아보자. npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D - 핫리로딩을 위해서는 위와 같이 리액트 리프레시와 리프래시 웹팩 플러그인이 필요하다. npm i -D webpack-dev-server - 리로딩을 위해서 개발용 서버가 필요하므로 웹팩 데브 서버를 설치한다. - 그리고 기존에 packge.json파일 스크립트에 webpack만 작성했었던 대신 webpack serve --env development로 변경해 준다. - 이제 위에서 받은 플러그..
<리액트 기초> 리액트와 웹팩 * 웹팩 소개 - 지난 장까지는 컴포넌트를 하나만 만들었지만 컴포넌트를 여러개 만들게 되면 스크립트 문서가 너무 복잡해진다. 이렇게되면 코드를 관리하기가 매우 까다롭다. - 웹팩은 여러 개의 자바스크립트 파일을 하나로 만들어 준다. 이 때 바벨도 적용가능하고 코드를 더 깔끔하게 해준다. * 웹팩 사용 - 먼저 터미널을 켜서 원하는 폴더 내에서 npm init을 입력해 패키지를 만들어준다. - 리액트와 리액트 돔도 필요하므로 npm i react react-dom 을 입력하여 설치한다. - 웹팩을 사용하기 위해서 npm i -D webpack webpack-cli 두가지를 설치한다. 웹팩은 개발환경에서만 사용하므로 -D를 입력하였다. - webpack.config.js 파일을 만들어준다. module.ex..
<리액트 기초> 리액트와 Hooks * Hooks 소개 - 2018년 리액트에서 Hooks업데이트 이후 최근의 리액트는 클래스가 아닌 Hooks를 권장하고 있다. - 기존에도 함수형 컴포넌트가 사용 가능하긴 했으나 state 관리할 때에는 클래스를 써야 했었다. - Hooks의 업데이트 이후 함수형 컴포넌트를 사용하더라도 setstate와 ref기능들을 사용 가능해졌다. - 참고로 함수형 컴포넌트 = Hooks는 아니다. 기존에도 state를 안 쓸 경우에는 함수형 컴포넌트가 더 선호 되었다. hook은 함수컴포넌트가 아닌 useState나 useRef, useEffect등을 의미한다. * Hooks 사용 const GuGuDan = () => { const [first, setFirst] = React.useState(Math.ceil(..
<리액트 기초> 메서드와 함수형 setState 이번 장에서는 간단한 구구단 게임을만들며 리액트의 기능들을 학습했다. 질문이 각 1부터 9까지 숫자로 랜덤으로 나오고 답을 입력한다. 입력버튼을 누르면 틀리면 땡, 정답이면 정답이라는 문자와 답을 출력하고, 다음 문제가 위에 새로 뜨게 된다. 먼저 지난 장에서와 같이 헤드에 리액트, 리액트돔, 바벨을 넣는다. 그리고 div태그로 root를 만들어준다. class GuGuDan extends React.Component { constructor(props) { super(props); this.state = { ... }; } onSubmit=(e) => { ... }; onChange=(e) => ...; input; onRefInput = ...; render() { return ( ... ); } }..
<리액트 기초> 리액트 컴포넌트 이번 장에서는 리액트를 통해 간단한 컴포넌트를 만들어 보았다. 리액트는 컴포넌트라는 객체를 통해 비슷한 형식을 매우 간단하게 불러와서 보여줄 수 있다. 게다가 변화가 있더라도 페이지의 새로고침없이 원하는 부분만 변화시키며 사용자의 경험을 더 좋게 만들 수 있다. 먼저 헤드부분에 리액트와 리액트 돔을 불러왔다. 바벨은 후에 있을 JSX문법때문에 불러왔다. 참고로 개발환경에서는 .development.js를 사용하지만 배포후에는 production.js로 변경한다. body에는 리액트돔으로 넣어줄 태그들이 들어갈 root div를 만들어 둔다. 먼저 컴포넌트가 들어가는 스크립트를 만들었다. 아래에 html태그와 비슷한 구문이 있는데 이것은 javascript와 xml을 합친 JSX이다. 이것을 사용하기 위해..

티스토리툴바