Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- optimistic lock
- HandlerMethod
- #@Transacional
- TDZ
- CQS
- CORS
- ExceptionResolver
- assertJ
- demand paging
- propagation
- Java
- NestJS 요청흐름
- COPYOFRANGE
- type eraser
- wrapper class
- SPOF
- pessimistic lock
- cross-cutting concerns
- Transaction
- 단어변환
- 프로그래머스
- RequestMappingHandlerMapping
- generic type
- IllegalStateException
- API
- 벌크연산
- tracking-modes
- 역정규화
- hoisting
- Generic method
Archives
- Today
- Total
jingyulog
React-Hooks 본문
❓ React-Hooks란?
- React에서 만든 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 하는 도구
- 쉽게 설명하면, Hooks가 있기 때문에 간단한 함수형 컴포넌트로 클래스형 컴포넌트를 대신할 수 있다는 것이다.
- 대표적인 Hooks에는 useState, useEffect가 있다.
클래스형
// 클래스형
import { Component } from "react";
class New extends Component {
constructor(props){
super(props) // 다른 컴포넌트한테 받은 데이터
this.state = {} // 컴포넌트 안에 보관해둘 데이터
}
componentDidMount(){
// 컴포넌트가 최초 그려진 후 실행
}
componentDidUpdate(){
// 컴포넌트가 변경되었을때 실행
}
render(){
return <div>이것은 클래스형 컴포넌트</div>
}
}
export default New
함수형 (Hooks 사용)
// 함수형 컴포넌트 ( hooks 사용 )
import { useState,useEffect} from "react";
function New(props){ // 다른 컴포넌트한테 받은 데이터
const [state] = useState({}) // 컴포넌트 안에 보관해둘 데이터
useEffect(() => {
// 컴포넌트가 최초로 그려진 후 실행
})
useEffect(() => {
// 컴포넌트가 변경되었을때 실행
})
return <div>이것은 함수형 컴포넌트</div>
}
export default New
🔎 State란 무엇인가
- State는 리액트 컴포넌트에서 데이터를 담기 위한 상자이다.
- state: 컴포넌트에서 사용하는 변수
- setState: 컴포넌트에서 사용하는 변수를 바꿔주는 기능
- useState: 컴포넌트에서 사용하는 변수를 만들어주는 기능
useState로 State 변수 만들고, 바꾸기
// 리액트 컴포넌트에서 변수 만들기
const [classmate] = useState("철수") // 변수명, 변수 만드는 기능, 담을 내용
// 리액트 컴포넌트에서 변수 바꾸기
const [friend, setFriend] = useState("영희")
setFriend("크리스")
리액트에서 let을 안쓰고, state를 변수로 사용하는 이유
- 리액트 컴포넌트는 앞쪽의 화면에 보여지는 부분과 뒷쪽에 데이터를 관리하는 부분으로 나눌 수 있다.
- 만약 단순히 javascript 변수를 이용해서 '좋아요'를 화면에 그렸다면, '좋아요'가 증가해서 변경되었을 때, 뒷쪽의 데이터 부분만 변경되고 앞쪽 화면에는 반영이 되지 않는다.
- 하지만, 컴포넌트 변수 state를 사용해서 화면에 그리고, setState()를 사용해서 '좋아요'를 변경하면, setState() 안에서 화면을 새롭게 그리라는 명령이 실행되어 변경된 데이터가 화면에 새로 그려진다.
'Tech > React' 카테고리의 다른 글
Routing 및 조건부렌더링 (0) | 2023.05.08 |
---|---|
React에서 graphql 사용하기 (0) | 2023.05.08 |
CSS-IN-JS (Emotion) (0) | 2023.05.05 |
React 컴포넌트 (0) | 2023.05.05 |
React란? (0) | 2023.05.05 |