리액트 훅(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..

안녕하세요 https://www.udemy.com/course/react-next-master/ 강의에서 이런 걸 만들어본다고 하길래, 세팅만 해놓고 강의 보기 전에 먼저 만들어봤어요 우선 현재 카운트를 나타내는 컴포넌트와 버튼이 있는 컴포넌트로 분리시키고 각각 Viewer.jsx, Controller.jsx로 이름 지었습니다. Controller.jsx에서 버튼을 누르면 그 값을 props를 통해 Viewer.jsx 전달하면 될 것 같습니다. 처음에는 Controller.jsx에서 버튼의 값을 직접 끌어다가 쓸 생각을 했습니다만, Controller.jsx에 있는 버튼에서 받아온 value값을 Viewer.jsx로 넘길 수 있는 방법이 생각나지 않았어요 근데 학교 프로젝트에서 머리 깨져가면서 배웠던 것..

현타를 느끼다가 조금 진정됐습니다 위기감을 얻기 위해 기록하려고요 감사합니다

안녕하세요 인스타에서 개쩌는 덧셈 계산기를 봤어요 도저히 참을 수 없었습니다. 여러 개의 State를 선언하는 것이 아니라, 하나의 State를 선언하고 객체를 이용했습니다. 배운 내용을 바로 적용해 보니 재밌군요 처음에는 이벤트 핸들러도 State처럼 하나로 통합하고 싶어서 위처럼 만들었습니다. 하지만 'send' 버튼을 눌렀을때, Answer 값이 변경되면서 Output 부분에 렌더링 되게 하려면, 아무래도 분리하는 게 맞다는 생각이 들어서 분리했습니다 onChangeHandler는 두 개의 input 값을 각각 관리하는 핸들러이고, onClickHandler는 Answer을 계산하는 핸들러입니다. return 부분입니다. 주의점은 label 요소에서 for가 아니라, htmlFor 속성을 사용해야합..