uuid 먼저 yarn add react-uuid를 통해 패키지 설치를 한 후 사용할 수 있다. 요소마다 구분할 수 있는 특별한 값이 필요한 경우에 사용하면 된다! { id: uuid(), title: "제목1", contents: "내용1", isDone: false, } 위의 사진처럼 todo list 하나마다 삭제하거나 완료를 해야하는 상황에서 uuid()메서드를 사용하면 고유한 id값을 사용할 수 있다. uuid()를 알지 못했을 때는 id : todo.length +1 이 방식으로 id값을 부여했다. 하지만 이렇게 하게 될 경우 리스트를 삭제하고 새로 추가하는 과정에서 id값이 같은 리스트가 만들어질 수 있는 오류가 있었다. Spread Operator let str = 'hello world'..
프로그래머스 입문 : 배열 회전시키기 function solution(numbers, direction) { var answer = []; //answer에 push //right일때 if (direction == "right") { answer.push(numbers[numbers.length - 1]); for (let i = 0; i < numbers.length - 1; i++) { answer.push(numbers[i]); } } //left일때 else if (direction == "left") { for (let i = 1; i < numbers.length; i++) { answer.push(numbers[i]); } answer.push(numbers[0]); } return answ..
React Hook useState 배치 업데이트 : 변경된 내용을 한꺼번에 모아서 한번에 실행 함수형 업데이트 setState((현재state)=>{return ~~~}) uesEffect 렌더링 될 때, 특정한 작업을 수행해야 할 경우에 설정하는 hook 의존성 배열 Dependency Array clean up : return에 함수로 작성 useRef ref 값에는 current 값이 존재한다. 설정된 ref 값은 unmoount 전까지 유지된다. let 키워드를 사용해서 내부변수를 선언하면, 렌더링 시 변수가 초기화된다!! (함수라서) input의 ref라는 속성을 통해서 해당 DOM요소로 접근할 수 있다. split() 메서드 let alphabet = ['a', 'b', 'c', 'd', '..
이번주에 알게된 것 React에서 화면을 렌더링 되기 위해서는 State가 변경되어야 한다. useState hook을사용해서 변수를 관리해줘야 한다. 만약 State가 객체일 경우에는 불변성을 유지하는 방법을 사용해야 한다. (spread operator 등) map() 메서드 인자로 콜백함수를 받을 수 있다. 만약 콜백함수의 return값이 한줄이라면 생략해서 작성 가능하다. (a)=>a*2 만약 콜백함수의 return값이 한줄이 아니라면 괄호 안에 멀티라인으로 작성 가능하다. return을 쓰지않으면 undefined가 반환된다. onClick과 onChange 해당 메서드로 event를 제어할 수 있다. evnet 제어 시 인자로 event를 받아야 한다. onChange = {(event)=>e..
프로그래머스 입문 : 369게임 첫번째 시도 function solution(order) { var answer = 0; //숫자를 문자열로 변환 let newOrder = String(order); //반복문을 통해 n%3==0인지 확인 for (let i = 0; i < newOrder.length; i++) { if (newOrder[i] % 3 === 0 && newOrder[i] !== 0) { answer++; } } return answer; } newOrder[i] !== 0 을 하면, 비교연산자이기 때문에 0이 아닌 값인지 판단하는 것으로 생각하여 해당 연산자를 사용했다. 하지만 !==이 엄격한 비교를 하는 연산자인지 모르고 사용하여 원하는 값이 출력되지 않았다. 두번째 시도 functi..
React props 추출하기 - 구조분해 할당 자식에게 props 전달하기 {todo .filter((todo) => todo.isDone === false) .map((todo) => { return ; })} 구조분해 할당X function WorkingCard({ props }) { return ( {props.todo.title} {props.todo.body} ); } 부모로부터 상속받은 값을 그냥 props로 사용한다면, key-value pair 형식인 객체로 값을 받기 때문에 상속받은 요소를 사용할 때마다 앞에 props.을 붙여줘야 한다. 그렇게 하지않으면 undefined를 마주할 수 있다. 구조분해 할당O function WorkingCard({ todo, onSubmitHandle..
버튼을 컴포넌트로 분리할 때 event 넘겨주기 분리하기 전에 작성은 onClick={()=>함수명(필요한 인자)} 이 방식으로 작성했고, 정상적으로 기능도 했다. 하지만 분리하고 난 후에 클릭한 요소의 event값을 받아오는 부분은 자동으로 되지 않아서 콘솔에 event가 undefined로 확인되었다. 그래서 onClick={(event)=>함수명(event,필요한 인자)} 이렇게 클릭할 때 event 요소를 같이 넘겨주고, onSubmitHandler선언부에서 ( event, id )로 인자를 두개 받아주면 작동이 된다! 프로그래머스 입문 : 최댓값 구하기(1) sort 메서드를 이용해서 내림차순으로 정렬하면 간단하게 풀릴 문제이지만, sort를 사용하지 않고 풀어보고 싶었다. 첫번째 시도 func..
State의 변경이 있어야 리렌더링됨 React는 화면을 렌더링할지를 state의 변화에 따라 결정한다 단순 변수는 무시한다 객체는 새로운 객체를 만들어줘야 한다. (새로운 데이터 주소값 할당) spread나 map, filter 등으로 처리할 수 있다. React 개인과제 const notDoneButtonHandler = (id) => { // 해당하는 값의 isDone:true로 변경 const newTodo = todo.map((todo) => { if (todo.id === id) { todo.isDone = false; } return todo; }); setTodo(newTodo); }; map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 ..
