익명의 개발노트

1. 리액트 CRUD를 연습하면서, List 형태 뿌리는 방법 1) 원페이지에 state와 ul, li를 가지고 뿌린다. 2) state를 관리하는 페이지와 ul부분을 컴포넌트로 가져와서 뿌린다(list 부분 따로 컴포넌트 제작) 3) 원페이지에 state와 ul까지 존재하고 map쓰고 return 하는 부분만 컴포넌트로 만들어서 가져온다(현업에서 많이 사용) import React from 'react'; import Button from '../button' const ItemList =(props)=> { console.log(props) return( {props.inputValue} props.handleUpdateClick(props.index)}/> props.handleDeleteClick..

1. git issue commit git commit -m "fixes #이슈번호" 2. HTML 테이블 Tag 사용시 주의사항(양식준수) 1) tr은 무조건 있어야함. 2) tr은 thead 또는 tbody에 있어야함. //코드가 깨지네 -_- 3. 중복되는 path 설정 줄이기 import Title from '../../Components/Title/Title'; 위와 같이 import값 복잡하게 나올 경우, page와 component에 index.js를 만들어서 Title>index.js export {default} from './Title'; 위와 같이 작성해주면 import Title from '../../Components/Title'; 위와 같이 실제로 줄일 수 있다. 4. impor..

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..

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

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

이벤트 방식은 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 값을 업데이트 시 주..

리액트 JS는 프레임워크가 아닌 자바스크립트 라이브러리이다. 하는 일 : 유저인터페이스를 위해서 사용하는 라이브러리임. 나온 배경 : 기존 js, html, css를 활용해서 구성해도 되지만, 웹 자체가 페이지가 아닌 웹 어플리케이션으로 발전함에 따라서 많은 컴포넌트들을 관리해야하는데, 그런 부분들을 react에서 가상 DOM을 사용하여, 사용자로 하여금, 개발에 집중할 수 있게 해준 라이브러리이다. 일일이 DOM을 만져서 변경하기엔 해야할 일이 너무 많다. 설치는 https://github.com/facebook/create-react-app 페이스북 리액트 깃헙 참고. npx create-react-app my-app cd my-app npm start //yarn을 설치한 사람은 yarn start..