useEffect 훅을 사용하면 컴포넌트가 마운트, 언마운트, 업데이트 시 할 작업을 설정할 수 있다. (마운드, 언마운트는 각각 컴포넌트가 나타나고 사라지는 것을 말한다.) 이를 이용해 애플리케이션 내에서 벌어지는 사이트 이펙트 (리액트의 관심사가 아닌 것)를 제어할 수 있게 된다. useEffect가 필요한 이유 예를들어 페이지에 접속했을 때, get요청으로 데이터를 받아와 화면에 보여주는 컴포넌트가 있다고 해보자. 이런 기능은 get요청을 받은 다음에 화면에 뿌려줘야 하기 때문에 데이터를 state로 처리한다. 그런데 useEffect가 없다면 state가 변경될 때마다 계속 다시 컴포넌트 함수가 실행될 것이다. 컴포넌트 함수가 실행되면 다시 get요청을 하고, 다시 받아온 데이터로 state변경이..
React에서 form 양식을 입력받는 방법 중 하나로 useRef를 사용할 수 있다. useRef를 통해서 DOM을 선택하고, 해당 DOM의 value를 받아노는 방법이다 사용법은 아래와 같다. React의 기능 중 하나인 useRef를 불러오고 객체를 생성하여 변수에 담는다. 생성한 객체를 원하는 태그의 속성 ref의 값으로 넣는다. 변수명.current 로 해당 DOM을 불러올 수 있다. 주의사항으로 이렇게 불러온 DOM을 직접 조작하면 안 된다는 것이다. 리액트에서 화면에 출력되는 것을 바꾸고 싶다면 state를 변경해야 한다.
https://actually-i-am.tistory.com/47 리액트의 기초 - props 이전 포스트 : https://actually-i-am.tistory.com/46 리액트의 기초 - 컴포넌트와 JSX 리액트를 간단하게 설명하자면 컴포넌트들이라고 할 수 있다. 컴포넌트는 무엇인가 그렇다면 컴포넌트는 무엇인가? 그 actually-i-am.tistory.com props는 컴포넌트를 쓰면서 특정값을 전달해주고 싶을 때 사용한다. 그리고 그 특정값으로 JSX를 넘길 수도 있다. 특별한 props인 children을 사용하면 가능하다. 템플릿을 재사용하고 싶을 때 활용할 수 있다. 사용 예시는 아래와 같다. function App() { return ( ); } import React from 'r..
- Total
- Today
- Yesterday
- 강의후기
- 네트워크
- 삽질방지
- 앨리스배열
- 개발일지
- 웹퍼블리셔
- 취미
- 팁
- 프로젝트
- autoplay
- 타입스크립트
- TIL
- 정규표현식
- 리액트
- 회고록
- 마크다운
- DevOps
- 삽질방시
- 토이프로젝트
- 보안
- storybook
- 리덕스
- 키크론 v10
- 키보드
- 하우징 도색
- AWS
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |