# onchange
02.18 복습
onchange 함수는 우리가 작성한 Javascript를 통해 변화가 일어났는지 탐지해줍니다.예를 들어 그래서 보통 만약 input type을 text or number 형식으로 만들면 글을 쓸 때마다, 아니면 숫자를 클릭하여 올릴 때마다 값을 바뀌는 것을 줘야하는

일기장 만들기
기본 ui준비 DiartEditor컴포넌트 App.js useState useState를 이용하여 이름을 변경한다. 위 화면처럼 아무것도 입력하지 않아도 name이 적혀있는 것을 알 수 있다. --- onChange onChange를 이용하면 변경한 aut
[ React ] <select>에서 onChange 가 계속 call 된다면?
코드가 위와 같이 되어있다면 딱히 이벤트가 없어도 onChangeSelectValue는 계속 call 될 수 있다. 그럴 땐 아래와 같이 onChange를 event로 감싸보자. 그렇게 하면 event가 일어날 때만 로직이 call된다.

Reactnative + Typescript에서 TextInput onChange 과 useRef
지난번에 여러개 Textinput에 대한 것을 typescript로 하면서 필요한 것들을 정리했다. 지난Post두 개의 TextInput에서 첫번째 TextInput 입력 후 submit하면 다음 입력 TextInput으로 focus가 움직이도록 하기위해 useRef를

[react] throttle과 debounce
스크림도르의 성향 태그 추가 모달을 리팩토링하던 중 searchWord라는 state의 onChange에 따라 전체 컴포넌트가 리랜더링되는 것을 확인했다.최적화를 위해서 방법은 찾아봐야하는 상황. 이것저것 시도해보기 시작했다.가장 먼저 들었던 생각이다. onChange

[react] input (file)에 같은 파일 다시 올리기 (+image preview)
자바스크립트에서 file을 upload 하기 위해서는 input 태그를 type="file"로 해서 사용한다. 이때 file을 upload하면 onChange event가 발생하는데, 같은 파일을 다시 upload할 경우 event가 trigger되지 않는다. 따라서
리액트(4) 레시피 프로젝트
크게 4가지 파트로 나뉠 수 있습니다1\. import 2\. 변수 선언3\. 함수 선언4 JSX 문법./App.css import 합니다, 내장함수 useEffect, useState 를 호출합니다, ./Recipe 를 호출합니다api id 랑 key 는 유효하지 않

[CS] React State & Props Day-21
React 함수 컴포넌트 (React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있습니다.React Component에 props를 전달할 수 있습니다.살면서 변할 수 있는 값을 뜻합니다. (일반적으로 상태)라
[React] React Hook (useState, useEffect)
Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.기본 사용법useState()는 Hook의 함수들 중 하나입니다.

[팀프로젝트] Lush clone-로그인페이지
구현기능onChange, onClick 이벤트를 통한 로그인 기능 구현SignIn.js로그인페이지에서 아이디,비밀번호 인풋창에서 입력될 값은 바뀌기 때문에 state,setState 설정아이디,비밀번호 인풋창은 회원가입페이지에서도 재사용이 가능할 수가 있어서 컴포넌트로

React Hook!
오늘 배운 재미있는 리액트 함수형 컴포넌트.오늘 설명 중 인상깊었던 부분은, 리액트의 변수 선언을 state에 비교했다는 것이다.이게 별 것 아닌 것 같은 설명 같지만, 굉장한 설명인 것이, 리액트에서는 값이 변하려면 state와 setState밖에는 안되기 때문에 s

[React] input 값 불변성 지키며 객체로 관리하기
"벨로퍼트와 함께하는 모던 리액트"의 "input 상태 관리하기"와 "여러개의 input 상태 관리하기"를 읽고 정리한 글입니다.

React_7
render 부분 정리를 위해 getContent() 함수에 정리했다.return은 \_article로 한다.목록을 불러오는 부분인 getReadContent() 함수를 만든다.UpdateContent 컴포넌트를 만든다.console에 app.js에서 받은 data를