728x90 728x90 전체 글153 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. 리액트가 작동하는 방식 리액트가 작동하는 방식 리액트의 핵심은 컴포넌트라는 이며 우리는 사용자 인터페이스를 구축하기 위해 컴포넌트를 사용하고 리액트는 이 컴포넌트 개념을 사용한다. 즉 리액트는 컴포넌트를 통해 사용자 인터페이스를 효과적으로 구성하며 이에 대한 업데이트 역시 컴포넌트를 통해 한다. 여기에서 중요한 개념이 하나 나오는데 React DOM이다. React DOM은 웹에 대한 인터페이스이며 리액트는 어떻게 컴포넌트를 다루는지는 알고 있지만 리액트는 웹을 모른다. 이는 실제 HTML 요소들을 화면에 표시해주는 리액트 DOM이 고려할 문제이다. 리액트는 컴포넌트 관리, 상태 관리, 어떤 객체의 상태와 컴포넌트가 바뀌어야 하는지를 확인하고 컴포넌트의 변경 전후의 상태를 확인하는 라이브러리일 뿐입니다 React DOM은, 브.. 2023. 1. 29. React forwardRefs와 useImperativeHandle React forwardRefs와 useImperativeHandle 어떤 state를 전달해서 그 컴포넌트에서 무언가를 변경하는 방식이 아니라 자식 컴포넌트 내부에서 함수를 호출하는 방식으로 부모 컴포넌트와 자식 컴포넌트가 상호작용할 수 있다. 일반적인 리액트 패턴이 아니기때문에 자주 사용되지않고 자주 사용해서도 안되지만 도움이 될 때도 있다. 특히 포커스나 스크롤링같은 사례에서는매우 유용할 수 있다. 로그인 폼에서 유효하지 않은 input을 포커스하고 싶을 때 일반 input이라면 useRef를 사용하고 focus 메소드를 호출하면 된다. const emailInputRef = useRef(); const passwordInputRef = useRef(); const submitHandler = (e.. 2023. 1. 28. FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app) 오류 FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app) 오류 문제 상황 firebase를 통해서 이미지를 업로드 하는 과정에서 아래와 같은 오류가 발생하였다. ⚠️FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app) 잘못된 코드 문제점은 새로 고침을 하게 되었을 때 firebase app의 config 설정이 이미 되어있어서 새로 설정할 필요가 없기 때문에 발생한다. 개선한 .. 2023. 1. 27. 이전 1 ··· 20 21 22 23 24 25 26 다음 728x90 728x90
