FE/React19 Class Component & Functional Component 리액트는 컴포넌트로 이뤄져있다. 컴포넌트로 시작해 컴포넌트로 끝난다 해도 과언이 아니다. 이 컴포넌트를 만드는 데 두 가지 방식이 있다. 클래스 컴포넌트(Class Component)와 함수 컴포넌트(Functional Component)다. 결론부터 말하면 여러 이유로 함수 컴포넌트가 더 낫다. Class Component 리액트가 처음 세상에 나타났을 때 컴포넌트는 클래스형 컴포넌트가 장악했다. 이 클래스는 물론 자바스크립트에 있는 그 클래스에서 가져왔다. 사용 방식도 거의 같다. class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 클래스 컴포넌트가 많이 쓰인 이유는 정교한 작업을 할 수 있었기 .. 2022. 10. 1. useEffect 처음 페이지를 불러올 때 한 번만 로드하고 싶은 게 있다면 useEffect가 필요할 때다. 서버에서 초기값을 가져올 때, 그리고 리렌더링이 필요하지 않을 때 정말 유용한 hook인 듯하다. 물론 useEffect에는 다른 기능도 더 있다. useEffect 사용 방법 3가지를 정리했다. 사용 방법 useEffect 기본 폼은 아래와 같다. 이게 무언가 싶을 수 있지만 한 가지씩 뜯어보자. import { useEffect } from "react"; export default function UseEffectPage() { useEffect(() => { return () => {}; }, []); return ( ); } 1. 웹 처음 업로드할 때 한 번만 실행 기본 코드 useEffect(() =>.. 2022. 9. 30. useRef 리액트를 사용하다보면 DOM에 접근하고 싶을 때가 한 두번이 아니다. 자바스크립트로만 할 때는 getElementbyId나 getElementbyClass 혹은 querySeletor를 통해 쉽게 접근했다보니 리액트로 웹을 만들다보면 자연스레 DOM을 가져올 생각부터 든다. onChange나 onClick 이벤트를 통해 쉽게 이벤트 객체를 가져올 수도 있지만, 태그 자체를 가져와할 때도 있다. 이럴 때 useRef를 주로 쓴다. 사용법 파일 첨부를 예로 들어 설명하고자 한다. 파일 첨부 시 대부분 input 태그 자체를 사용하지만, 별도로 디자인해 사용하기도 한다. 이러 때 useRef를 이용한다. import { useRef } from 'react' export default UseRefPage(){.. 2022. 9. 29. state Lifting state를 활용하다보면 같은 값을 공유하고 싶은 컴포넌트가 생긴다. 이 컴포넌트에서 입력한 값이 다른 컴포넌트에서도 반영되길 바라는 것. props를 떠올릴 텐데 좋은 접근이다. 다만 props는 형제 요소에겐 줄 수 없다. 이때 필요한게 state lifting이다. 버튼을 누를 때 1씩 늘어나는 컴포넌트와, 10씩 늘어나는 컴포넌트로 예시를 들어본다. 먼저 메인페이지를 만들고 컴포넌트를 만들었다. 그리고 각각 함수를 설정했다. index.jsx import Count_first from "./Count_first"; import Count_second from "./Count_second"; export default function Main() { return ( ); } Count_first.j.. 2022. 9. 26. Container-Presenter container와 presenter는 리액트의 코드 디자인 패턴이다. 2015년에 개발자 Dan Abramov가 처음 소개했으며, 현재는 리액트의 고전 디자인 패턴이라 해도 무방하다. 싱글페이지, 구조관련과 기능을 한페이지에서 작성할 수 있는 jsx가 반영된 게 리액트의 장점임을 우리는 알고 있다. 다만, 프로젝트가 커지다보면 한 파일 내에 모든 코드가 다 있다보니 편해서 사용했지만, 어느순간 불편함을 초래한다. 이를 해결하고자 나온게 코드 디자인 패턴들이다. Container-Presenter는 그 패턴 중 하나다. 구조 Container-Presenter 디자인 구조는 기본 개념은 간단하다. 기능 부분과 보여주는 부분을 단순하게 분리하는 것. 페이지 함수에서 여러 기능이 포함되고 리턴에서 화면을 그.. 2022. 9. 21. 이전 1 2 3 4 다음
