# useState
[React] useState Hook
useState는 함수형 컴포넌트에서 사용된다.useState는 클래스형의 this.state, this.setState와 같다useState를 사용하는 방법은 아래와 같다이렇게한다면 출력 값은 Apple이 아닌 Banana로 바뀌어서 출력된다.
React Hooks 훅
오늘은 React Hooks에 대해 알아 보려고 한다! 훅은 낚시 바늘의 훅처럼 컴포넌트에게 낚시 바늘을 걸듯이 훅을 거는 것이다! 컴포넌트의 Life Cycle 인생 중간중간에 내가 특정 명령을 내릴 수 있다 컴포넌트가 등장할때 OOO 해줘! 컴포넌트가 업데이트
useState를 이용한 여러 개의 input 상태 관리와 불변성
사용자가 입력할 수 있는 input 태그의 상태를 관리하는 방법을 다루어 보겠다. input 상태 관리하기 input 에 입력하는 값이 하단에 나타나게 하고, 초기화 버튼을 누르면 input 의 값이 비워지도록 구현하였다. InputSample.js App.js
[React] 4. state, props
1. state ✔ state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. 즉, props를 바꾸려면 부모 컴포넌트에서
TIL. 4주차 금요일
1. state VS props props는 외부로부터 전달받은 값 state는 내부에서 변화하는 값 State가 변경되면, re-rendering을 통한 화면 업데이트가 일어난다. 2. useState React에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 사용한다. useState의 전달인자는 state의 초기값이다. ...
Hook(1): useState
기존의 react에서는 functional component에서 state를 사용할 수 없었다. 하지만 v16.8 이후부터 useState라는 함수를 사용하여 functional component에서도 state의 사용이 가능하게 되었다.useState를 호출하면 배열
Hook의 useState
이 글은 React 공식 홈페이지를 참고하여 작성되었습니다.처음 Velog를 생성할 때 꼭 해야겠다라고 생각했던 것이 바로 Hook에 대한 정리였다.왜냐하면,언젠가 부터 당연하게 Functional Component 형태로 개발을 하게 되면서 필요할 때마다 매번 공식문
[React] input 처리
하나의 input 처리하기 input의 onChange 이벤트를 사용하고 이벤트 객체를 e로 받아 사용했다. e.target은 input DOM, e.target.value은 현재 input에 입력한 값을 가져온다. 여러개의 input 처리하기 const {nam
[React] useState
useState함수를 통해 바뀌는 값을 관리할 수 있다. 카운터에서 버튼을 클릭했을때, 실행되는 함수를 작성해보자. 💥여기서 주의해야할 점은 `에서 `처럼 함수를 호출해버리면 안된다. 그렇게 되면 컴포넌트가 렌더링될때 호출이 되어버린다. 우리는 클릭되었을때 함수를
Rest-API , GRAPHQL-API , API , HTTP , 바인딩, state , 함수형or클래스형 컴포넌트 , node_modules폴더가 깃에 안올라가는 이유..
Rest-API , GRAPHQL-API , API , HTTP , 바인딩, state , 함수형or클래스형 컴포넌트 , node_modules폴더가 깃에 안올라가는 이유..
조건있는 회원가입 폼 만들기
캠프시작 3일차3일밖에 안흘렀는데 3주가 흐른 느낌이다.삐걱거리며 코드를 짜는데 페어분께서 정말 도움을 많이 주셨다!하나하나 연결하며 설명해주셔서 이해도 빨랐고, 페어분 코드도 보면서 다른 방향을 볼 수 있었다. 굿!오늘 많이 애먹은 코드의 조건은회원가입 화면을 다음의
버튼으로 랜덤 6자리 숫자 생성하기
캠프시작 2일차왜 응용이 안될까.. 생각이 바로 이어지지 않을까!!기초가 부족해서겠지.. 이해될때까지 반복 또 반복이다!오늘의 코드는 버튼을 클릭하면 랜덤 6자리 숫자가 나오는 코드이다.전에 짜놓았던 코드를 힐끔거리며 몇번이고 반복해서 익히도록 노력했다.이해는 됐지만
React Hook!
오늘 배운 재미있는 리액트 함수형 컴포넌트.오늘 설명 중 인상깊었던 부분은, 리액트의 변수 선언을 state에 비교했다는 것이다.이게 별 것 아닌 것 같은 설명 같지만, 굉장한 설명인 것이, 리액트에서는 값이 변하려면 state와 setState밖에는 안되기 때문에 s
useState VS useRef
둘 다 렌더 주기 및 UI 업데이트 동안 데이터를 보존하지만 업데이트 기능이 있는 useState Hook만 재렌더링을 유발합니다. useRef는 실제 값을 보유하는 현재 속성이 있는 객체를 반환합니다. 대조적으로 useState는 두 개의 요소가 있는 배열을 반환합
[React Native] useState
안녕하세요~ 오늘은 React Native에서 어쩌면 가장 많이 쓰일 useState에 대해서 공부를 해보겠습니다. React Native뿐만 아니라 React에서도 많이 쓰이는 문법이므로 나중에도 도움이 될 것 같네요. 그럼 더 자세히 알아보겠습니다. useStat
[TIL] React 함수형 컴포넌트의 useEffect와 친해지기
오늘은 useEffect에 대한 공부를 해보려고 합니다.useState는 계속 사용하게 되니 친해지는 감도 있고 구조와 원리도 익숙해지고 있습니다.하지만 useEffect는 life-cycle과 연관되어 있다보니 자주 다루지 않기도 하기 때문에 아직 어렵습니다.Effe
[React] setState의 비동기 처리
React에 관한 글은 처음인데 react 프로젝트를 진행하다가 삽질을 하다가내핵을 뚫고 지구 반대편으로 갈 뻔하고자해서 이렇게 블로그에 글을 남겨본다..React가 어떻게 동작하는지부터 설명해야될 것 같다. react 동작 방식을 알면 usestate가 왜 저렇게 작
Hook - useState
useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다.useState는 값의 상태를 관리를 합ㄴ디ㅏ..초기값을 통해서 특정 값을 정의해주는 함수를 만들어 줄 수 있습니다.useState는 위와 같이 선언 하고 사용 합니다.파라미터는 각각 gett