728x90 728x90 Frontend/React30 리액트가 작동하는 방식 리액트가 작동하는 방식 리액트의 핵심은 컴포넌트라는 이며 우리는 사용자 인터페이스를 구축하기 위해 컴포넌트를 사용하고 리액트는 이 컴포넌트 개념을 사용한다. 즉 리액트는 컴포넌트를 통해 사용자 인터페이스를 효과적으로 구성하며 이에 대한 업데이트 역시 컴포넌트를 통해 한다. 여기에서 중요한 개념이 하나 나오는데 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. React useReducer 개념 및 사용 방법 React useReducer 개념 및 사용 방법 useReducer 개념 useReducer는 state 관리를 도와주는 hook으로 useState와 약간 비슷하다. 하지만 더 많은 기능이 있고 더 복잡한 state에 특히 유용하다. 예를 들어 여러 state들이 함께 속해 있는 경우, 여러 state가 같이 바뀌거나 서로 관련된 경우useState에서 얻은 state는 종종 사용 및 관리가 어려워지거나 오류가 발생하기 쉽다. 이런 더 강력한 state 관리가 필요한 경우 useReducer를 useState 대신 쓸 수 있다. 하지만 그렇다고 해서 항상 useReducer를 사용해야 한다는 건 아니며 더 강력하다고 해서 항상 더 좋다고 할 수는 없다. 사용하기 조금 더 복잡하기 때문에 조금 더 설정.. 2023. 1. 25. React Side Effects와 useEffect React Side Effects와 useEffect Side Effects란 리액트 앱의 컴포넌트의 주요 역할은 UI를 렌더링하는 것이다. state나 event, 그 모든 것의 주요 역할은 화면에 무언가를 가져오는 것이었다. 예를 들어 버튼이 클릭 되거나 어떤 텍스트가 입력되는 특정 이벤트에 따라 따라서 화면에 보이는 것은 변경될 수 있고 이것이 리액트가 애플리케이션에서 주로 하는 일이다. 사이드이펙트는 애플리케이션에서 일어나는 다른 모든 것을 뜻한다. 예를 들면 http request, local storage에 저장, timer설정 등 이것 들은 모두 애플리케이션에서 고려해야 하는작업이지만 화면에 무언가를 가져오는 것과는 관련이 없다. 그것은 리액트가 신경써야할 것이 아니고 그런 일을 하려고 리액.. 2023. 1. 24. 이전 1 ··· 3 4 5 6 7 8 다음 728x90 728x90
