index.html

초기화 1번 인풋 값 : {one}, 2번 인풋 값 : {two}, 3번 인풋 값 : {three} 위와같은경우 인풋 각각 state 를 줘서 처리할 수도 있지만 아래와 같은 방법이 더 효율적이다. 우선 위와같이 각 인풋에 name 값을 주고 고유의 이름을 붙여 준다. 그리고 const [inputs, setInputs] = useState({ one: "", two: "", three: "" }); const { one, two, three } = inputs; useState를 각 이름별로 객체로 설정한뒤, 구조분해할당으로 각 값을 꺼낸다. 이후 맨 위처럼 input 의 value에 각 state를 넣어주고 onChange 이벤트를 설정해준다. 인풋이 하나만 있을때는 event.target.value..

useInput 함수를 통하여 제어하는 예제. https://youtu.be/s6KmBH1Ew4Q 글자수 제한. const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue); const onChange = event => { const {target:{value}} = event; //const value = event.target.value 와 같음 let willUpdate = true; if(typeof validator === "function"){ willUpdate = validator(value) } if(willUpdate){ setValue(value) } }; return {..

우선 create-react-app 을 하여 설치한 후 npm add react-router-dom 으로 리액트라우터를 설치한다. src 디렉토리에 index.js에 import { BrowserRouter } from "react-router-dom"; **브라우저라우터는 히스토리 api를 이용해서 실행된다. 를 임폴트 해준뒤 App 컴포넌트를 감싸준다. 이후 실습으로 Home.js 와 About.js 를 만들어 각각의 페이지를 구성해 준다. App.js 로 가서 import { Route } from "react-router-dom"; //임폴트 해줌 function App() { return ( //path 는 주소를 나타내며, component는 그 주소에 보여질 컴포넌트를 의미한다 ); } 위와..

이제 drag & drop 기능을 추가해 줄 것이다. 여기서는 패키지를 불러와서 기능을 추가해 줄 것인데 일단 설치해줘야 할것은 npm i react-beautiful-dnd 이놈이다. 이놈은 DragandDropContext 와 Draggable, Droppable 이 세가지를 지정해줘야 하는 모양이다. 우선 App.js가 DragDropContext가 될 것이다. import { DragDropContext } from 'react-beautiful-dnd' 임폴트 해주고 컴포넌트 안에 드래그가 끝나면 무슨일을 할껀지를 정의하는 함수를 하나 추가해준다음에 const onDragEnd = () => { //드래그 끝나면 할일 } DragDropContext 로 기존에 있던놈들을 한번 감싸준다. //pr..

생각보다 분량이 많지 않았다. 지래 겁먹어서 어렵겠다... 하고있었는데 생각보다 쉬웠다. 오늘 만든건 저번시간과 대충 비슷한 맥락의 리스트보드 안의 카드 추가였다. 복습하는 느낌으로 따라하니 괜찮았다. 우선 actions 폴더에 cardsActions.js 를 만들어 준다. 이후 저번 listsAction.js 내용을 복붙해주고(거의 같으니까) 세부 내용만 조금 수정해 주었다. import { CONSTANTS } from "../actions"; export const addCard = (listID, text) => { return { type: CONSTANTS.ADD_CARD, payload: {text, listID} }; }; 이놈은 파라미터로 listID 와 text 를 받는데 listID는..

오늘은 시간에비해 진전이 없었다. 그마저도 벨로퍼트님의 블로그(https://react.vlpt.us/) 없었으면 아직도 씨름하고 있었을것이 분명하다. 리덕스의 기본개념은 정말 너무 상세하고 자세하게 기술되어있기때문에 나처럼 삽질하지말고 차근차근 읽어본후 부딪히길 바란다...... 오늘 구현할 기능은 아래와 같다. Add another List를 누르고 나온 입력폼에 뭔가를 적고 ADD LIST 를 누르면 오른쪽처럼 리스트가 추가되는것이다. 일단 오늘 습득한 개념은 action과 dispatch 이다. 그리고 1일차에 이해가 안갔던 부분도 사실 사전세팅이었다. 오늘들어서 보니 action의 type에 따라서 새로운 상태를 만들어주는 reducer 였다. const listsReducer = (state ..