익명의 개발노트

Select Tag 사용시 이벤트 핸들링 Grapefruit Lime Coconut Mango 1. state 초기값 설정 2. select 태그에 대한 이벤트 핸들러 설정 3. 이벤트 핸들러에서 setState값 변경 class FlavorForm extends React.Component { constructor(props) { super(props); this.state = {value: 'coconut'}; //1.초기값 설정 this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { //3.setState값 변경 this.setStat..

웹팩 자동빌드 설정하기. npm i react-hot-loader npm i webpack-dev-server 위 명령어로 설정한 다음에 webpack.config.js파일에 가서 1. module 안에있는 plugins에 'react-hot-loader/babel' 추가해준다. 2. output 안에 publicPath : '/dist/' 를 추가해준다. 웹팩 데브서버 설치시 설정해줘야함. package.json 에 들어가서 3. script > build 부분을 "webpack-dev-server --hot" 으로 변경해준다. 그 후 client.jsx 파일로 가서 const React =require('react'); const ReactDom = require('react-dom'); const ..

1. 등장배경 리액트에서 클래스나 함수형 컴포넌트가 하나의 컴포넌트를 의미한다. 페이스북같은경우는 2만개정도의 컴포넌트가 있다고 한다. 컴포넌트 이거 관리하려면 너무 많아서 유지보수또한 어렵다. 이런식이면 중복이 발생할 수 있다. 그래서 중복제거하기 위해 웹팩이라는 것이 나왔다. 자바스크립트 파일을 번들(합쳐줌)해준다. 웹펙을 하려면 노드를 알아야한다. 노드는 서버보다 자바스크립트 실행기로 알면 좋다. 리액트에서 노드알아야한다라는 뜻은 "서버를 알아야한다 가 아니고 웹팩을 하기위한 자바스크립트 실행기를 알아야한다. "로 이해하면 좋다. 2. 웹팩을 알아야하는 이유 CRA(이하 "create-react-app"의 줄임말)로 하면 웹팩부터 바벨, 빌드까지 다 리액트에서 되기때문에, 처음부터 웹팩설정하는 방법..

Hook 간다는 의미인가? 리액트 안에서 기본적으로 사용했던 클래스, state가 없을때 사용했던 함수형으로 했었는데. 리액트 훅은 함수형에 ref와 state를 사용할 수 있게 해준 거다. 실제로 써보면 클래스형 컴포넌트보다 훨씬 간결해짐을 볼 수 있다. 클래스형 함수형 훅 사용 왠만한건 변수로 선언해서 빼버림. 편리해보인다. 참고자료 : 제로초님 유튜브 강좌(웹게임) https://www.youtube.com/watch?v=EUQnxfZgFJU&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=11 1. useEffect : 라이프싸이클을 대신해준다. 2. useMemo : 메모이즈 기능으로 값을 저장해준다. 3. useCallback : 함수를 저장해준다. 클래스 사..

리덕스 : 상태관리(로직작성하는부분) 를 컴포넌트 밖에서 처리하도록 도와주는 라이브러리이다. 없는 상태로 뭔가를 만드려면 로직도 복잡해지고, 그냥.. 복잡하다는 느낌밖에 없었다. 이걸 이해해보려면, 리액트로 투두리스트 한번 만들어보길 바란다. 리덕스를 사용하면, 스토어에서 모든 상태관리가 일어난다. 1. 액션 : 상태변화를 일으킬때 참조하는 객체(타입이 반드시 있어야함) 2. 스토어 : 애플리케이션의 상태값을 저장, 관리 3. 디스패치 : 액션을 스토어에 전달하는 것을 말함 4. 리듀서 : 상태를 변화시키는 로직이 있는 함수. 파라미터를 2개받음.(현재상태, 액션객체), 함수내부에서 스위치 문을 만들어 액션 타입에 따라 새로운 상태 만들어서 리턴함. 5. 구독 : 스토어 값이 필요한 컴포넌트는 스토어를 ..

css 작업의 종류에는 몇가지가 있다. 1. 순수 CSS파일로만 작성하는 방법 2. Sass 3. CSS module 4. styled-components 살펴보자. 문법은 약간씩 다르다. css의 JS같은 느낌? 1. Sass 장점 1) 자주쓰는 CSS 스타일 분리해서 사용가능 2) sass-loader 설정 커스텀마이징 가능 : 1) 경우나 여러폴더 안에서 해당 scss 파일 찾아야하는 경우 용이 3) node_modules에서 불러오기 가능 : 파일이 겁나게 많다.. 2. CSS Module 장점 1) className이라는 라이브러리 사용가능 : 클래스 묶어서 사용가능 2) Sass와 혼합해서 사용가능 : Modules.css 를 Modules.scss 로 변경해서 사용가능. 코드 변경 약간 해줘..

라이프싸이클을 보자마자. 안드로이드 라이프싸이클이 생각나는 것은 왜일까.... 위 메서드를 작성 후 실행하면 실행순서는 Constructor → getDerivedStateFromProps → render → componentDidMount 순으로 실행된다. 업데이트시에는 getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate 순으로 실행된다 각 메서드들의 용도. 1. Constructor : 초기 State를 정할 수 있다. 2. getDerivedStateFromProps : props로 받아온 값을 state에 동기화시키는 용도 3. render : 컴포넌트들을 화면에..

컴포넌트 내부에서 DOM에 직접 접근할 경우가 생기면 ref를 사용한다. 먼저 ref를 사용하지 않고 원하는 기능을 구현가능한지 살펴보는게 먼저이다. 1. DOM을 꼭 사용해야 하는경우 1) 특정 input 박스에 포커스 주기 2) 스크롤 박스 조작하기 3) canvas 요소에 그림그리기 등 2. 사용방법 1) props 설정하듯이 하면 된다. 2) 아래처럼 원하는 DOM에다가 ref를 주면된다. (...) return ( {this.box = ref}} //부모꺼에만 ref다니깐 자식 컴포넌트까지 볼수있음. > );

이벤트 방식은 html과 비슷하며, 약간다르다. 1. 이벤트효과이름은 camelCase로 작성해야함. 2. 이벤트에 JS코드 전달이 아닌 함수형태의 값을 전달함. 3. DOM요소에만 이벤트 설정할 수 있음. 우리가 만든 컴포넌트에는 이벤트를 줄수 없음. 우리가 만든 컴포넌트에 이벤트를 줘버리면 단순히 이름으로 인식해서 props를 전달해줌. 4. 이벤트의 종류는 많다. 참고 : https://reactjs.org/docs/events.html 이벤트 효과주는법 2가지 1. 랜더링할때 같이 효과부여 import React, {Component} from 'react'; import PropTypes from 'prop-types'; import './EventPractice.css'; class Event..

state를 다뤄보자. 사용법은 앞에서 배운 props와 비슷하다. state는 props과 다르게 컴포넌트 자신이 지닌 값으로 컴포넌트 내부에서 값을 업데이트 한다. 선언 방식은 두가지!. 1. 생성자를 생성하고 그안에 this.state={ } 이런식으로 만드는 방법 constructor(props){ //Component로부터 상속받아, Coponent의 메소드를 커스템해서 쓰고 싶어서 생성자 생성. super(props); this.state ={ number : 0 } } } 2. 생성자 없이 만드는 방법. (...) state={number:1000} // 생성자 없이 transform-class-속성문법으로 생성자 밖에서 정의가능. render(){ (...) State 값을 업데이트 시 주..