주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

React 강의 듣고 나만의 사이트 만들기 시작!! 먼저 초반부 Front 작업을 진행한다. 쪼랩이라 라이브러리 다운받을때 빼먹는건 진행하면서 차차 고치도록 해야겠다. 친절하게 코드가 다 들어있지않은 이유는 스스로 공부하는 목적이기때문에 사소한 부분이 많이 빠져있다. 1. 내 사이트명의 폴더를 생성한다. OKAYOON 2. Front 와 Back 따로 진행해야하기에 폴더를 두개 생성한다. OKAYOON -front -back // front npm init npm i next@9 react react-dom npm i prop-types npm i eslint eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks -d npm i -D ba..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn react는 setState로 state관리를 한다. 불변성을 지켜야하기때문에 아래와 같이 사용했는데 this.setState({ value : this.state.value }); 리액트 로직이 기존 state와 새로운 state를 비교하여 재 렌더링하기 때문에 참조형인 array, object 같은 경우에는 주의해야한다. 이때 배열에 push하게 되면 기존 참조된 배열에 push가 되기 때문에 기존 state와 새로운 state는 같아진다. 따라서 아래와 같이 새로운 배열을 set해줘야한다. this.setState({ array ..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 부모컴포넌트에서 props를 getNumber라고 명명해서 넘기면 자식컴포넌트에서 this.props.{명명한 이름} 으로 받으면 된다. // 부모컴포넌트 // Test 컴포넌트 {this.props.getNumber} 간단한 경우 props를 전달해 사용할 수 있지만 복잡해질 경우 관리가 어렵다고 한다. 그래서 사용하는 것이 context나 redux 같은 것들. 앞으로의 강의에서 나오겠지. jsx에서의 주석은 return( {/* 이렇게 쓴다!! */} );

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 전체적은 Example.js의 코드를 하나하나 뜯으면서 Hooks로 변경해보겠다. const React = require('react'); const { Component } = React; class Example extends Component{ state = { value : '' } onSubmit = () => { // ... }; onChange = () => { // ... }; inputEl; onRefInput = (c) => { this.inputEl = c; }; render(){ return( {this.state..