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() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 ..
State 만들기, 변경하기 만들어야 할 웹페이지 기능 : input창에 입력한 값을 id와 password에 저장하고, 그 값을 alert창에 띄워주기 내가 작성한 코드 import React, { useState } from "react"; function App() { const [id, setId] = useState(""); const [password, setPassword] = useState(""); return ( 아이디 : 비밀번호 : 로그인 ); } export default App; 위의 코드처럼 작성하면, 화면에서 alert창에 값을 띄워주는 것까지는 문제가 없다. 하지만, alert창 이후 serId와 setPassword로 값을 초기화 시켜주는 부분이 작동하지 않게 된다. 물론..
바닐라 자바스크립트 팀프로젝트 진행 주차 필수 구현 기능 : 영화 리뷰, 게시판 기능 아쉬웠던 점 동일한 닉네임 사용했을 경우의 예외처리 하지 못한 점 깃 명령어 능숙하지 못한 점 일부만 반응형 구현한 점 알게된 점 Localstorage 사용법 mongoDB처럼 데이터를 저장할 수 있는 기능 데이터 베이스처럼 이용하려면 key값은 'comment'같은 이름으로 한개로 설정하고, 안에 저장되는 내용을 수정하고 저장하는 식으로 이용할 수 있다. Git PR 내 브랜치에서 작업을 하고, merge를 원하는 브랜치가 있을 때 깃허브 사이트에서 PR을 보낼 수 있다. 만약 PR을 했을 때 충돌이 일어난다면 바로 merge할 수 없고, merge 권한이 있는 사람이 충돌사항을 확인해서 진행할 수 있다. Git r..
