728x90 728x90 Frontend/React30 Custom Hooks 개념 및 사용 방법 Custom Hooks 개념 및 사용 방법 커스텀 훅은 결국은 useState와 같은 내장 hook처럼 정규 함수이다. 하지만 안에 상태를 설정할 수 있는 로직을 포함한 함수이다. 커스텀 훅을 통해, 다른 컴포넌트에서 사용할 수 있는 로직을 커스텀 훅으로 아웃소싱할 수 있으며, 이를 통해 다양한 컴포넌트에서 호출이 가능하다. 아래 코드에서 사용된 BackwardCounter와 ForwardCounter는 App에서 컴포넌트로 사용되고 있다. ForwardCounter와 BackwardCounter는 모두 useState와 useEffect를 통해 상태를 관리하고, 시간 간격을 만들어서 매 초 마다 새로운 카운터 상태를 설정한다. 똑같은 일을 하지만 한 가지 다른점은 역방향으로 카운팅을 한다. 이 것 외에.. 2023. 2. 2. React useMemo 개념 및 사용 방법 React useMemo 개념 및 사용 방법 리스트를 렌더링 할 때 정렬해서 보여주고 싶을 때가 있다. 아래와 같이 리스트를 렌더링 하면 리스트가 오름차순으로 정렬되어 렌더링 될 것이다. const TestList = (props) => { const { items } = props; const sortedList = () => { console.log('Items sorted'); return items.sort((a, b) => a - b); }; console.log('TestList RUNNING'); return ( {props.title} {sortedList.map((item) => ( {item} ))} ); }; export default React.memo(TestList); 하지만 때.. 2023. 2. 1. React useCallback 개념 및 사용 방법 React useCallback 개념 및 사용 방법 useCallback React.memo를 통해서 Button 컴포넌트가 재실행되는 것을 막고자 한다. 하지만 아래와 같이 코드를 작성하면 Button을 클릭할 때 Button컴포넌트가 재실행된다. function App() { const [title, setTitle] = useState(''); const changeTitleHandler = () => { setListTitle('New Title'); } return ( Change Title ); } const Button = (props) => { console.log('Button RUNNING'); return ( {props.children} ); }; export default Reac.. 2023. 1. 31. React memo 개념 및 사용 방법 React memo 개념 및 사용 방법 상위 컴포넌트로부터 하위 컴포넌트로 계속 뻗어나가는 컴포넌트 트리를 보면 한 가지 의문이 생긴다. 연결된 모든 컴포넌트 함수가 재실행되면 굉장히 많은 함수가 가상 비교가 된다는 것인데 성능에 영향을 미치지는 않을까 하는 질문 말이다. 이런 작업은 확실히 어느 정도의 성능을 필요로 하며 그런 식으로 모든 자식 컴포넌트를 재실행하는 것은 낭비다. 물론 가상 비교이기 때문에 리액트가 이런 식의 실행 및 비교 작업에 최적화되어 있어 간단한 어플리케이션에서는 전혀 문제가 되지 않지만 더 큰 어플리케이션이라면 좀 더 최적화가 필요하다. 따라서, 개발자는 특정한 상황일 경우에만 하위 컴포넌트를 재실행하도록 리액트에 지시할 수 있다. 이런 특정 상황은 컴포넌트가 받은 props가.. 2023. 1. 30. 이전 1 2 3 4 5 6 7 8 다음 728x90 728x90
