개발조각

useRef로 변수관리 (개념 설명) const ref = useRef(value); 함수형 컴포넌트에서 useRef를 부르면 ref오브젝트를 반화해 준다. ref오브젝트는 아래와 같이 생겼다. {current: value} 인자로 넣어준 초기값은 Ref안에 있는 current에 저장이 된다. {current: "hi"} => const ref = useRef("hi"); {current: "hello"} => const ref = useRef("hello"); {current: "nice"} => const ref = useRef("nice"); ref오브젝트는 수정이 가능하기 때문에 언제든지 원하는 값으로 바꿀 수 있으며, 반환된 ref는 컴포넌트의 전 생애주기를 통해 유지가 된다. => 컴포넌트가..

리액트 훅 중에서 가장 중요한 게 무엇인지 물어본다면 useEffect라고 대답할 것이다. useEffect란? (개념설명) 어떠한 컴포넌트가 Mount (화면에 첫 렌더링) Update (다시 렌더링) Unmount (화면에서 사라질 때) 특정 작업을 처리할 코드를 실행시키고 싶을 때 useEffect를 사용한다. useEffect는 콜백함수를 받는데 (콜백함수란 다른 함수의 인자로 전달된 함수를 의미한다.) 콜백함수 내부에 원하는 작업을 전달해 줄 코드를 작성하면 된다. useEffect(()=>{작업...}) useEffect는 두 가지 형태를 알고 있으면 된다. 1. 하나의 인자만 사용(콜백함수) useEffect(()=>{ // 작업... }); 컴포넌트가 렌더링 될 때마다 실행 2. 두 개의 ..

리액트 훅 중에 기본 중에 기본인 useState에 대해 알아보자. React에서 State란? 컴포넌트가 가질 수 있는 상태를 의미한다. 만약 시계라는 컴포넌트가 있으면 State는 time을 가질 수 있다. useState는 컴포넌트의 상태를 가져오고 생성하고 업데이트를 해줄 수 있는 도구를 제공해 준다. useState의 기본형태 const [state, setState] = useState(초기값); state : 현재의 상태값 setState : state를 변경시켜주고 싶을 때 사용 useState활용 const [time, setTime] = useState(5); 초기값으로 5를 가지게 되고 이때는 time = 5이다. 시간을 변경하려면 setTime(6)으로 넣어주면 time이 6이 된..