Frontend/React20 React: useReducer에 대해서 이전에 useState에 대해 작성한 적이 있다. useReducer도 useState처럼 동적으로 변경이 되는 데이터를 관리할 때 사용할 수 있는 상태 업데이트 훅이다. useReducer의 경우 복잡한 state 로직을 다룰 때 (state 객체 안에 또 다른 state가 있을 경우 등) 유용하게 사용된다. 공식 홈페이지에서는 가급적이면 useState를 사용을 권장하고 있다. const [state, dispatch] = useReducer(reducer, initialState, [init]);state: 현재 상태 값을 나타낸다. dispatch: state를 다른 값으로 업데이트하고 재렌더링을 해주는 함수로, action을 인자로 받아 reducer에 전달한다.action : 사용자에 의해 수.. 2024. 9. 5. React: React에서 Styled Component 사용하기 styled-components Age" data-og-host="styled-components.com" data-og-source-url="https://styled-components.com/" data-og-url="https://styled-components.com/" data-og-image="https://blog.kakaocdn.net/dna/bwAXGi/hyWZd8hAoc/AAAAAAAAAAAAAAAAAAAAAIIPlGgMKz0_ggIonGLQbHIETUkbbhuqeTy0KfYfiSL4/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=LlXfFuI7cxDduSwPkXoUZ3DbkB4%3D 2024. 9. 4. React: useEffect에 대해서 useEffect는 컴포넌트의 생명주기 동안 특정 작업을 수행할 수 있게 해주는 리액트 훅이다. useEffect가 나오기 전에는 클래스 컴포넌트에서 생성(componentDidMount), 업데이트(componentDidUpdate), 제거(componentWillUnmount) 메서드를 통해 생명주기 변화에 대응했었다. 현재는 useEffect를 통해 간편하게 사용할 수 있게 되었다. useEffectuseEffect( () => { 생성이 되었을 때 시행되는 로직 return () => {제거 되었을 때 시행되는 로직} }, [ 변화를 관찰할 props/state ]생성(mounting)은 컴포넌트가 처음 생성되어 DOM에 추가될 때를 의미하며, 제거(unmounting)은 컴포넌트가 DO.. 2024. 9. 3. React : 컴포넌트 합성이란 ? 컴포넌트 합성은 여러 개의 작은 컴포넌트를 조합하여 더 큰 기능을 수행하는 컴포넌트를 만드는 방법을 의미한다. 분리된 컴포넌트를 사용하는 쪽에서 조합해서 사용하는 방법이다. 컴포넌트 합성을 통해서 코드의 재사용성을 높이고 유지보수를 용이하게 할 수 있다. 컴포넌트 합성 시에 중요한 것은 단일 책임 원칙, 즉 각 컴포넌트는 하나의 기능만을 담당해야한다. 컴포넌트 합성 예제한 예시로 React로 TodoList를 구현한다고 했을 때,TodoInput이라는 컴포넌트는 등록을 하는 기능을 가지고 있고TodoItem은 각 Todo의 항목을 표시하고 수정 및 완료 버튼을 제공한다. 각 Todo항목을 관리하는 기능을 가지고 있다.TodoEdit는 TodoItem에서 Todo의 수정 기능을 가지고 있다. TodoIn.. 2024. 8. 31. React에서 Web Component 사용하기 Web component는 캡슐화된 컴포넌트를 만들어 재사용이 가능할 수 있게 하는 JavaScript의 표준으로, 모든 프레임워크에서 공통으로 사용이 가능하다는 장점이 있다. 그래서 프레임워크/라이브러리의 교차 사용이 자주 발생하는 곳에서는 프레임워크 기반의 컴포넌트보다 JavaScript의 웹 컴포넌트를 사용하여 재사용성을 증가시킬 수 있다. Web Component 사용하기Web Component 파일의 경우에는 폴더를 별도로 만들어서 관리해야 한다. public 안에 폴더를 별도로 생성해서 관리하는 경우고 있고, util / lib 이라는 폴더를 따로 생성하여 관리하는 경우 등이 있다. 1. Web Component 생성 >window.customElements.define("custom-t.. 2024. 8. 30. React: portal에 대해서 Portal은 부모컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법이라고 소개한다. 즉, React 컴포넌트에서 DOM 트리 상에서의 위치를 변경할 수 있도록 하는 기능이다. 모달, 알림, 드롭다운 메뉴 등과 같은 컴포넌트를 독립적인 위치에서 렌더링 할 수 있으며 독립된 스타일링을 유지할 수 있다. 하지만 많이 사용하게 되면 코드의 난독화 및 성능 저하가 발생할 수도 있다.ReactDom.createPortal(child, container) - child : 엘리먼트, 문자열 혹은 fragment와 같은 렌더링 할 수 있는 React 자식요소- container : DOM 엘리먼트 Portal을 사용해 모달창 만들기1. index.html에 모달 컴포넌트를 렌더링 할 DOM.. 2024. 8. 29. 이전 1 2 3 4 다음