전체 글 (69) 썸네일형 리스트형 191222(일)TIL. React refs, Todo list 5, Ant design Ref와 DOM https://ko.reactjs.org/docs/refs-and-the-dom.html 1. Ref를 사용해야 할 때 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양하세요. 2. Ref 생성하기 Ref는 React.createRef()를 통해 생성되고 ref 어트리뷰트를 통해 React 엘리먼트에 부착됩니다. 보통, 컴포넌트의 인스턴스가 생성될 때 Ref를 프로퍼티로서 추가하고, 그럼으로서 컴포넌트의 인스턴스의 어느 곳에서도 Ref에 접근할 수 있게 합니다. class MyComponent extends React.Com.. 191220(금) TIL React Todo list 4 todo추가 시 여러 줄 입력 가능 enter버튼을 누르면 입력이 되고, shift+enter를 동시에 누르면 입력창이 한 줄 늘어난다. todo를 추가하는 component function AddTodo({ nowTitle, handleAddTodo, handleIsAddingTodo }) { function handleKeyDown(e) { if (e.shiftKey) { //shift키가 눌러졌을 경우 바로 아무 일도 하지 않는다. // =>shift + Enter의 경우에도 아래의 else if문을 돌지 않고 바로 return return; } else if (e.keyCode === 13) { handleAddTodo(nowTitle, e.target.value); handleIsAddingTo.. 191219(목) TIL React Todo list 3 [ Todo list 기능 추가 ] 새 목록 추가 시 다른 영역 클릭하면 바로 저장 & input text 사라짐 TitleList에서 관리하던 isAddingTitle(isAddingTitle이 true일 경우 input text가 생기며, 그 input text에 입력되는 값을 새 목록으로 만든다) state를 App으로 올려서 관리. (엔터 누른 게 아니고 다른 영역을 클릭한 것임) App의 클릭 핸들러에 클릭 시 클릭한 영역의 id를 토대로 input text가 아닌 곳이 클릭된 것을 판별한다. 아래는 해당 클릭 핸들러 함수. watchAppClick(e) { if (this.state.isAddingTitle) { //현재 새 title 입력 중 if (e.target.id !== "AddTit.. 191218(수) TIL React Todo list 2 [ Todo list 기능 추가 ] 오늘은 어제 만든 todo list에 기능을 추가했다. 아마 이번 주 동안 계속 얘만 붙잡고 있을 것 같다. 목록, todo 추가 시 포커스 변경 input text: autoFocus 사용 다른 목록으로 이동하면 filter초기화(all)로 todo list에 있던 state: displayState를 app.js로 옮긴 후 title클릭 시 해당 state의 상태를 'all'로 변경 완료된 todo는 todo list 맨 밑으로 이동 이건 스크린샷을 못 찍었다. sort사용. todoList.sort((todoA, todoB) => { if (todoA.completed && !todoB.completed) { return 1; } else if (!todoA.co.. 191217(화) TIL. React로 Todo App 만들기 오늘은 어제 그린 설계를 토대로 react로 todo앱을 만들어봤다. 규모가 매우 작은 데에도 불구하고 props 내리고 state상태 관리하고 하는 게 마냥 쉽지만은 않다. 아 이래서 react-redux를 쓰는구나~를 깨달았음! 일단 시간이 부족해서 CSS는 건드리지 못했고 현재까지 구현한 Todo앱에 대한 스크린샷과 간단한 기능 설명만 할 것이다.(아직 미완성이지만 오늘은 종일 이것만 했기 때문에ㅋㅋ) 완성하면 그 때 또 블로깅해야지~ 테스팅을 위해 기본 데이터를 저장해뒀다. 목록 1: title1 - [ ] text1, [ ] text2 목록 2: title2 - [ ] text3 목록의 데이터들은 모두 체크되어있지 않은 상태다. [ Todo App ] 1. 최초 실행 시 화면 실행했을 때 메인 .. 191216(월) TIL-1. Redux review, Todo App 1. Sprint Review 1-1. react-redux store라는 글로벌한 객체에서 state를 받아와서 상태를 관리하기 쉽게 함. 1-2. redux immutable.js https://immutable-js.github.io/immutable-js/docs/#/ React ❤️ Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기 스테이트를 복잡하게 설정한 경우 immutablejs를 사용하는게 좋다. 2. React Todo App Intro flex box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ flex공부용 개구리게임: https://flexboxfroggy.com/#ko flex.. 1913-15(금-일) TIL(?)-1. Redux 1. Redux redux사용 전 읽어보면 좋을 글 https://medium.com/lunit-engineering/당신에게-redux는-필요-없을지도-모릅니다-b88dcd175754? 1-1. Store https://redux.js.org/api/store 영어로 된 Docs읽느라 힘들었는데 찾아보니 한글번역사이트가 있었다!!!: https://deminoth.github.io/redux/api/Store.html A store holds the whole state tree of your application. The only way to change the state inside it is to dispatch an action on it. A store is not a class. It's j.. 191212(목) TIL-2. Intro Redux [CODESTATES in16] intro Redux redux: Js에서 사용할 수 있는 state container 1. Intro Redux 1-1. 컴포넌트 간 정보 공유 방식 react: 자식 컴포넌트 간 데이터를 주고받을 대, 부모 컴포넌트를 통해서만 주고받는다. 친척 컴포넌트 간 데이터를 주고받아야 한다면? 상태 관리가 힘들어짐. 1-2. Redux의 기본 개념 Single source of truth: store 컴포넌트들의 상태를 저장 상태가 관리되는 공간은 오직 하나: 외부에 존재하는 하나의 store State is read-only: Action 어떤 행동(Action)과 그에 따라 상태를 변경해주는 메소드들의 집합 Action: Simple JavaScript Object Chan.. 이전 1 2 3 4 5 6 7 ··· 9 다음
