useRef는 렌더링에 필요하지 않는 값을 참조할 수 있는 React Hook입니다. 렌더링이 잦게 되면 리액트의 성능에 문제가 생길 수 있기 때문에, 렌더링이 될 props, state와 렌더링이 되지 않을 값을 구분하는 것은 매우 중요한 일이다. const ref = useRef(initialValue) 공식 문서에 따르면 ref는 위와같이 사용될 수 있다. ref.current 프로퍼티를 변경해도 React는 컴포넌트를 다시 렌더링하지 않습니다. ref는 일반 자바스크립트 객체이기 때문에 React는 사용자가 언제 변경했는지 알지 못합니다. 초기화를 제외하고는 렌더링 중에 ref.current를 쓰거나 읽지 않는 것으로 합쉬다. ● useRef 사용법 : 클릭카운터 const App = ()=>{ ..
자바스크립트였다면 const, let, var을 사용해서 변수를 선언했을텐데 React에서는 state라는 훅을 사용해 변수를 선언하고 저장한다. useState는 배열로 리턴되고, 배열의 첫 번째는 설정값, 그리고 두 번째에는 값을 수정하는 setter함수로 구조가 배정되어있다. //[리액트 공식문서] const [state, setState] = useState(initialState); 사실 state에 대한 사용법은 너무 익숙히 다뤄봐서 포스팅을 하는게 맞나? 싶었지만, 공식문서를 읽어보니 알고있지 못했던 점이 많아 포스팅을 하는게 좋다고 생각했다. ●usestate 사용법 : 카운터 function App() { const [count, setCount] = useState(0); const p..
● 리액트에게 의존성으로 거짓말하는게 좋을까? ([ ], 빈배열로 한번만 실행하는게 조을까?) function Greeting({ name }) { const [counter, setCounter] = useState(0); useEffect(() => { document.title = 'Hello, ' + name; }, [name]); ... } 위의 예제에서 props에서 받아오는 name이 변하게 된다면 변할 때마다 렌더링 될 것입니다. 만약 'Dan'이였다가 'Yuzhi'로 변하게 된다면, 아래와 같은 절차를 밟아 확인할 것입니다. 의존성이 변했으니 렌더링이 되겠죠? 하지만 빈배열을 넣는다면 어떻게 될까요? 의존성이 같으므로 이펙트를 스킵할 것입니다. 그렇다면, 1초마다 숫자가 올라가는 카운터를..
여기까지 오기도 힘들었읍니다.. ㅜ 쭈륵.. useEffect 이 쫘식을 공부해 봅쉬다! 이 포스팅을 보기전에 이해가 잘되지 않는다면, 아래의 포스팅을 봐주시면 감사하겠읍니다. ● 클래스형 컴포넌트와 함수형 컴포넌트의 차이점? ● 클래스형 컴포넌트와 함수형 컴포넌트의 차이점 함수형 컴포넌트는 렌더링된 값들을 고정시킨다. 이 둘의 가장 큰 차이점은 props, state의 값들을 고정시키느냐 안시키느냐에 있습니다. App.js i ddaeunbb.tistory.com ● useEffect 이 쉑기 언제쓰나요? useEffect는 언제 쓰는 것이 좋을까요? 훅은 함수형 컴포넌트에서 쓰이는 것이기 때문에, 클래스의 라이프사이클 메서드를 사용할 수 없습니다. 클래스의 componentDidMount, compo..
