개발하자

책의 코드를 자세히 보지 않고, 기능만 정리하여 스스로 개발했다. 이후에 책의 코드와 비교하며 개선점을 찾아봤다. 기능 1. 할 일 입력 버튼을 눌렀을 때, Enter를 눌렀을 때 입력 이벤트가 발생 placeholder : 할 일을 입력하세요. 2. 리스트 추가 입력한 내용을 리스트에 추가 함 리스트 구성요소 체크박스 ( 할 일을 다 했을 경우 체크 할 수 있도록) 할일 내용 (체크박스 클릭 됐을 때 → 색깔 회색, 가운데 줄) 삭제 버튼 ( 버튼 누를 경우 리스트에서 삭제) 사용 라이브러리 react-icons App.js useReducer 사용 상태로 todoList를 가짐 {id, check, todo} action remove, check, add TodoInput.js app에서 dispat..

CSS 기본 스타일링 방식 1. 주의 사항 CSS 클래스를 중복되지 않게 만들어야 함 CSS Selector 이용: CSS 규칙을 적용할 요소를 의미함 .App .logo { // App 안에 있는 logo class를 탐색 } 네이밍 규칙 이용 BEM 네이밍 컴포넌트 이름 -클래스 (리액트 파일 자동 생성시) https://getbem.com/introduction/ BEM — Introduction Introduction On smaller brochure sites, how you organize your styles isn’t usually a big concern. You get in there, write some CSS, or maybe even some SASS. You compile it..

자바스크립트 배열의 map() 함수 jsx 내부에서 사용할 수 있는 js 반복문 문법? 리턴값이 존재하는 반복문은 뭐든 가능 할 듯 (reduce, filter, find 등) → 확인 필요함 데이터 배열을 컴포넌트 배열로 변환하기 function Component(props) { const array = [1,2,3,4] const numberList = array.forEach(number=> {number}) return numberList } key virtual DOM이 업데이트 여부를 쉽게 구분하기 위해서 li 엘리먼트에 key prop을 생성 해야함 unique한 값이어야 하고 배열의 인덱스는 사용할 수는 있지만 효율적으로 리렌더링 되지 않기 때문에 다른 고유값을 사용하는 것이 좋다 인덱스는..

ref는 어떤 상황에서 사용해야 할까? ref : Selector의 역할을 하는 것 selector에 대해서!!!! react에서 DOM에 접근하지 않고 상태를 변경함으로써 대부분 해결 할 수 있다. state만으로 해결할 수 없는 경우에 ref를 사용해야한다→ 어떤 상황에 필요한지 명확히하기 특정 input에 포커스 주기 스크롤박스 조작하기 canvas 요소에 그림 그리기 → 어떤 상황 이후에 다른 돔 객체를 접근하여 변경해야할 경우? ref 사용 함수 컴포넌트는 useRef라는 Hook이 있기 때문에 클래스 컴포넌트에서 적용 되는 방식으로 사용 1. 콜백 함수로 ref 설정 원하는 이름에 dom 객체를 할당 함 ex) this.input, this.submit 등 class Component { re..

리액트의 이벤트 시스템 html에서 제공하는 이벤트 시스템과 유사함 주의 사항 카멜표기법 : onClick 함수형태로 전달 DOM 요소에만 설정할 수 있음 (컴포넌트에 대해서는 설정 할 수 없음 클래스 컴포넌트 웹 브라우저의 네이티브 이벤트를 감싸는 객체이기 때문에 네이티브 이벤트와 똑같이 사용하면 됨 여러개의 state를 유지하고 이벤트로 업데이트 해야할 때 name과 같은 tag attribute 를 state와 같은 key 값으로 지정하여 사용 할 수 있음 handleChange = (e) => { this.setState({[e.target.name] : e.target.value}) } 이벤트 리스너를 arrow function 로 사용함→ 기존의 함수 형태로 사용하면 this binding을 ..

Module Bundler, Transpiler 1. Module Bundler 별개의 js 파일을 script 태그로 다운로드 받을 경우 파일이 다르더라도 같은 변수명이나 함수명에 대한 오류가 발생하는데 이러한 문제를 해결해 줌 분리되어 있는 파일을 파일별 scope를 구분지어 하나의 파일로 통합시켜줌 웹팩의 경우 통합하려면 어차피 파일을 다 읽어야하는데 그 김에 할 수 있는 것들을 loader나 plugin으로 추가할 수 있음 webpack, rollup 2. Transpiler 최신버전의 자바스크립트를 지원하지 않는 환경, 예를 들면 es6를 지원하지 않는 환경에서 동작할 수 있도록 구 표준을 준수하는 코드로 바꿔줌 babel JSX란? 익숙한 markup 형태로 개발을 할 수 있도록 해주는 문법 ..