프로그래밍 언어

체크박스 수정 데이터가 들어있는 todo State이다. 체크박스를 눌렀을 때, 변화가 생기게 하려면 위의 값에서 isDone값만 수정해야 한다. 즉 기존의 todos 배열을 수정해야 하기에, 우선 onUpdate 함수를 생성한다. 또한 어떤 todo가 체크되었는지 확인해야 하기에 id 값을 받아와야 한다. id를 받아오기 위해 매개변수 이름을 targetId로 지정한다. 이후 상태변화 함수인 setTodos를 호출하고, 받아온 id에 해당하는 todo만 수정하면 된다. map 함수를 통해 todos를 순회시키고, 현재 todo.id와 매개변수로 받아온 id가 같을 때만 수정하도록 한다. 이후 해당 함수를 자식컴포넌트로 전달한다. 자식 컴포넌트에서 구조분해할당을 통해 해당 함수를 받아오고, 사용하기 위한..

[key 값 전달] 리액트에서는 위의 todos 같이 배열 형태로 저장된 데이터를 map 메서드를 이용해서 리스트로 렌더링 할 수 있다. map 메서드를 이용해서 여러 개의 컴포넌트를 리스트로 렌더링 하고 있다. 리액트에서는 이렇게 map 메서드를 이용해서 어떤 html요소나, 컴포넌트를 렌더링 할 때는 반드시 고유한 식별자(key prop)를 전달해줘야 한다. 그래야 리액트가 내부적으로 리스트형태로 렌더링 된 여러 개의 item을 식별할 수 있게 된다. 즉 고유한 식별자를 전달하지 않으면 특정 요소를 삭제, 수정 또는 리렌더링 할 때, 성능이 느려지거나, 의도치 않은 문제가 발생할 수 있다. 이렇게 고유의 key 값을 전달해 주면 해당 오류가 사라진다. [서치바 만들기] 입력된 글자와 매칭되는 cont..

1. 아무것도 입력하지 않았을 때, 값 보내지 않게 하기 투두리스트에 빈 값을 보내도 추가된다면 좀 곤란할 것 같다. 그럼 투두리스트 실천하기는 좋겠다만 쓰는 의미가 없어지니 말이다. 우선 useRef를 호출하고, input을 참조하게 한다. onClick 함수은 버튼의 onClick에 들어가는 이벤트 핸들러이다. 값을 최종적으로 보내는 부분이다. if문을 통해 content가 공백이라면 inputRef가 참조하는 값에 포커스를 주고 바로 retrun 시켜버린다. 이렇게 되면 공백일 때 아래의 onCreate(content)가 실행되지 않고, 빈 값을 보내지 않게 된다. 2. input 박스에 값을 입력했을 때 초기화 값을 입력하고 추가버튼을 누르면, 값은 잘 들어가지만 input 태그가 초기화가 안된다..

리액트 훅(React Hook)은 함수 컴포넌트에서 리액트가 제공하는 다양한 기능을 사용할 수 있도록 도와주는 메서드를 말한다. - useState,useRef,useEffect 등이 이에 해당한다. - 모든 리액트 훅은 공통적으로 접두사 ‘use’가 붙는다. - 여러개의 Hook들을 묶어서 React Hooks라고 부른다. 기존의 class 컴포넌트들만 사용할 수 있었던 리액트의 기능을 Hooking 하듯 낚아채서 함수 컴포넌트에서도 동일하게 쓸 수 있도록 만들어주기에 React Hooks라는 이름을 붙임 리액트는 원래 클래스 문법으로만 컴포넌트를 만들 수 있었다 함수로도 만들 수는 있었지만 아무런 기능도 못쓰고 UI만 렌더링 할 수 있었다. 클래스 컴포넌트 : 문법이 복잡하고 코드 양이 많음 함수 컴..

누군가에겐 기초일 수 있으나... 정리해보려고 한다 일단 단순 무식하게 공책에 숫자를 쭉 써놓고 3,6,9가 들어있는 숫자들의 공통점을 찾아봤다. 10으로 나눈 나머지가 3으로 나누어 떨어진다는 것과, 10으로 나눈 몫 또한 3으로 나누어 떨어진다는 것을 발견했다. if (i % 3 == 0) or ((i // 10) % 3 == 0) or ((i % 10) % 3 == 0): print(0,end = " ") else: print(i,end = " ") 이렇게 하면 3의 배수와 3,6,9를 가진 숫자가 걸러질 것이라 예상했으나, 두 가지 문제점을 찾았다 문제점 1) 10 이하의 숫자가 싹 걸러져서 전부 0이 출력 문제점 2) 20,40,50 등의 숫자가 3번째 조건에 걸러져서 0이 출력됨 문제점 1은 ..

라이프 사이클은 말 그대로 생애 주기를 말한다. 컴포넌트는 [Mount -> Update -> Unmount] 3단계로 구분되는 라이프 사이클을 가진다 Mount : 탄생, 컴포넌트가 화면에 렌더링 되는 것 Update : 변화, 컴포넌트가 리렌더 되는 것 Unmount : 죽음, 컴포넌트가 화면에서 제거되는 것 라이프 사이클을 잘 이해하면 원하는 타이밍에 어떤 작업을 실행하도록 만들 수 있다. 라이플 사이클의 단계별로 원하는 작업을 수행시키는 것을 라이프 사이클 제어(LifeCycle Control)라고 한다. UseEffect를 이용하면 쉽게할 수 있다. useEffect와 라이프 사이클 제어하기 useEffect도 리액트가 제공하는 메서드이므로 react 라이브러리로부터 import 해야 한다. u..