React.js

📌 useRef로 DOM 요소 접근Ref를 사용하면 DOM 요소에 접근할 수 있는데, 이는 Document querySelector()과 비슷한 기능을 합니다. input 태그로 예제 코드를 먼저 작성해보겠습니다.const App = () => { return ( 로그인 );};export default App;  input을 클릭하면 input이 활성화되는데, 이 상태를 input이 focus 상태가 되었다고 합니다. focus를 자동으로 시켜주는 로직을 구현하려면 DOM 요소에 직접적으로 접근해야 합니다. 이를 useRef로 쉽게 구현할 수 있습니다. 로그인 페이지에 들어갔을 때, input을 클릭하지 않아도 focus 상태가 되도록 만들어보겠습니다. ref 속..

📌 useRef란?함수형 컴포넌트에서 useRef를 호출하면 ref Object를 반환합니다. ref Object의 형태는 다음과 같습니다.{ current: value }인자로 넣어준 초기값이 저장이 됩니다.수정이 가능하기 때문에 언제든 원하는 값으로 변경 가능합니다.컴포넌트가 렌더링이 되어도 언마운트 되기 전까지는 값을 계속 유지할 수 있습니다.📌 언제 useRef를 사용하나요?1. ref는 state와 비슷하게 값을 저장해두는 저장 공간으로 사용이 됩니다.state가 변경이 되면 리렌더링이 되고 함수가 다시 호출되기 때문에 컴포넌트 내부 변수들을 초기화합니다. 그래서 원하지 않는 렌더링 때문에 곤란해지는 경우가 생깁니다.ref가 변화해도 컴포넌트가 리렌더링이 되지 않습니다. 따라서 변수들의 값이..

📌 언제 useEffect를 사용하나요?어떤 컴포넌트가Mount 되었을 때 (화면에 첫 렌더링)Update 되었을 때 (다시 렌더링)Unmount 되었을 때 (화면에서 사라짐)useEffect 를 사용합니다. 📌 useEffect 사용 방법[빈 배열] useEffect는 인자로 콜백함수를 사용합니다.useEffect(()=>{ // 작업}); 이런 형태로 사용한다면 컴포넌트가 마운트, 업데이트될 때 실행됩니다. [의존성 배열]useEffect(()=>{ // 작업}, [value]); 이렇게 인자로 배열을 전달한다면, 매번 렌더링이 될 때마다 실행되지 않고 마운트될 때와 배열 value 값이 바뀔 때 마다 실행됩니다. 만약 빈 배열을 넣으면 컴포넌트가 맨 처음 화면에 렌더링될 때만 실행됩니..

📌  요약: useStateconst [state, setState] = useState( 초기값 ); state에는 현재값이 들어가며, setState로 state를 새로 변경 가능합니다. 만약 state를 변경할 때 이전 state와 관련이 있다면, 다음 코드처럼인자를 이전 state (prevState)return 값을 변경되는 state (newState)로 작성하는 게 좋습니다.setState((prevState) => { // ... return newState;});📚  공부 목적리액트로 개발할 때 함수형 컴포넌트를 사용한다면, 리액트 Hooks라는 편리한 기능을 사용할 수 있습니다. 클래스 컴포넌트는 state를 이용하여 업데이트, 생명 주기 메소드를 제공합니다. 반면, 함수 컴포..