React3 useRef 함수 컴포넌트에서 useRef는 ref오브젝트를 반환한다. { current: value } 인자로 넣어준 초기값이 ref안에 있는 current에 저장된다. 컴포는트가 unmount되기전까지는 그 값을 유지한다. useRef의 활용 1. state와 비슷하게 값을 저장하는 저장공간의 역할 useState는 state의 값이 변화하면 다시 렌더링이 되어 컴포넌트의 내부 변수들을 초기화한다. 이때 원치않는 렌더링때문에 어려움을 겪을때가 있다. 이럴때 useRef를 사용하면 변수는 값이 바뀐다고 해서 컴포넌트가 다시 렌더링되지 않는다. 2. DOM요소에 접근 컴포넌트 특정 DOM을 선택해야 할 때, ref를 사용한다. 함수 커포넌트에서 이를 설정 할 때 useRef를 사용하여 DOM요소에 접근한다. 2022. 7. 15. useEffect 1. Side Effect 부작용, 부수 효과라는 뜻으로 어떠한 동작을 할때 input-output 이외의 다른 값을 조작한다면, 이 함수는 Side Effect(부수효과)가 있다고 표현한다. Side Effect는 React의 함수 컴포넌트에서도 일어날 수 있다. Input이 state, props이고, output이 UI라면, 함수 컴포넌트의 Side Effect는 state와 props를 받아서 UI를 그려내는 것 이외의 행위라고 할 수 있다. (ex. Data Fetching) 2.useEffect useEffect는 리액트 컴포넌트가 랜더링될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. 컴포넌트가 Mount(화면에 첫 렌더링), Update(다시 렌더링), Unmount(화면에서 사.. 2022. 7. 11. useState 리액트에서 가장 중요하다고 볼 수 있는 useState에 대해 알아보자. state란 컴포넌트가 가질 수 있는 상태를 의미한다. App이라는 컴포넌트 안에서 state로 counter라는 state를 가질 수있다. 이런한 state를 우리는 리액트에서 useState를 통해 컴포넌트의 상태를 생성하고 업데이트 및 변경할 수 있게 도와준다. setState를 사용하여 state를 변경하면 해당 컴포넌트는 다시 실행된다.(렌더링) useState는 자바스크립트 destructuring문법을 사용한다. array안에 있는 데이터를 변수로 쉽게 저장하고 싶을때 사용하는 문법이다. 각각 name,age라는 변수를 사용할 것 없이 왼쪽 오른쪽의 형식을 멎추어주면 자동으로 변수가 샹성된다. useState를 사용한 .. 2022. 7. 11. 이전 1 다음
