728x90 728x90 전체 글153 React Custom Hooks 개념 및 사용 방법 React Custom Hooks 개념 및 사용 방법 커스텀 훅은 결국은 useState와 같은 내장 hook처럼 정규 함수이다. 하지만 안에 상태를 설정할 수 있는 로직을 포함한 함수이다. 커스텀 훅을 통해, 다른 컴포넌트에서 사용할 수 있는 로직을 커스텀 훅으로 아웃소싱할 수 있으며, 이를 통해 다양한 컴포넌트에서 호출이 가능하다. 아래 코드에서 사용된 BackwardCounter와 ForwardCounter는 App에서 컴포넌트로 사용되고 있다. ForwardCounter와 BackwardCounter는 모두 useState와 useEffect를 통해 상태를 관리하고, 시간 간격을 만들어서 매 초 마다 새로운 카운터 상태를 설정한다. 똑같은 일을 하지만 한 가지 다른점은 역방향으로 카운팅을 한다. .. 2023. 2. 7. React HTTP 요청 개념 및 사용 방법 React HTTP 요청 개념 및 사용 방법 리액트 앱이나 일반적인 브라우저 앱에서 실행되는 자바스크립트 코드가 데이터베이스와 직접 통신하면 안된다. 클라이언트 내부에서 데이터베이스에 직접 연결을 하게 된다면 코드를 통해 데이터베이스의 인증 정보를 노출시키는 행위이기때문이다. 브라우저에서 실행되는 모든 자바스크립트 코드는 브라우저뿐만이 아니라 웹 사이트의 사용자들도 접근하고 읽을 수 있다. 따라서 리액트 앱 코드 내부에서 데이터베이스에 직접적으로 통신하는 것 대신에 다른 방법을 사용해야 한다. 예를 들어 백엔드 어플리케이션안데 데이터베이스 서버일 수도 있고 보통은 다른 서버일 경우가 많다. 그리고 데이터베이스와 통신하는 백엔드 어플리케이션은 사용자가 코드를 확인할 수 없기 때문에 데이터베이스의 인증 정보.. 2023. 2. 6. React 오류 경계(Error Boundaries) 개념과 사용 방법 오류 경계(Error Boundaries) 어플리케이션에서는 가끔은 예방할 수 없는 오류도 있으며 어떤 오류는 어플리케이션의 어떤 부분에서 다른 부분으로 무언가가 잘못되었다는 것을전달할 때 사용되기도 한다. HTTP 요청 전달을 예로 들면 서버가 일시적으로 응답이 없을 경우에는 이 요청에 대해 응답할 수 없으며 따라서 어플리케이션에서는 오류가 발생된 것을 보게 될 것이다. 이와 같이 개발자가 막을 수 없는 오류는 분명 존재한다. 이럴 때 try-catch문을 사용하는데 try를 통해 실패할 수 있는 코드를 쓰고 잠재적으로 발생할 수 있는 오류를 감지해서 오류 처리를 할 수 있는 대체 코드를 실행한다. componentDidUpdate() { try { someCodeWhichMightFail() } ca.. 2023. 2. 5. React 컴포넌트 생명주기 컴포넌트 생명주기 클래스 컴포넌트에서는 리액트 훅을 사용할 수 없기 때문에 useEffect()를 사용할 수 없다. 하지만 클래스 컴포넌트는 컴포넌트 생명 주기라는 개념이 존재한다. 예를 들어서, DOM에 렌더링되거나 DOM에서 삭제될 때 같은 경우이다. 추가할 수 있는 생명 주기 메소드는 componentDidMount(), componentDidUpdate(), componentWillUnmount() 등 이 있다. 좀 덜 중요한 생명 주기 메소드들도 있지만 3개의 메소드가 가장 보편적이고 가장 중요한 메소드이다. render() 메소드와 같은 내장 함수로 리액트에서 임포트해온 내장 Component를 상속하면 바로 사용할 수 있다. componentDidMount componentDidMount().. 2023. 2. 4. React 클래스형 컴포넌트 개념과 사용 방법 React 클래스형 컴포넌트 개념과 사용 방법 컴포넌트를 만들때는 function 키워드나 화살표 함수표현을 사용하여 화면에 렌더링할 jsx 코드를 반환하는 자바스크립트 함수를 사용한다. 대부분의 리액트 프로젝트에서는 이러한 함수형 컴포넌트만을 사용할 것이다. 컴포넌트를 정의하는 또 다른 방법이 클래스형 컴포넌트이다. 함수형 컴포넌트를 통해 만들 수 있는 건 클래스형 컴포넌트로도 만들 수 있다. 클래스 기반 컴포넌트가 존재하는 이유는 리액트 16.8 이전에 상태를 처리하고 사이드 이펙트를 다룰 때 클래스 기반 컴포넌트를 사용했어야 했고 리액트 16.8 이전에는 함수 컴포넌트에서는 상태 변경이 불가능했고 사이드이펙트 역시 다룰 수 없었기때문이다. 리액트 16.8 이후 리액트에서 리액트 훅이라는 훅에 대한 .. 2023. 2. 3. Custom Hooks 개념 및 사용 방법 Custom Hooks 개념 및 사용 방법 커스텀 훅은 결국은 useState와 같은 내장 hook처럼 정규 함수이다. 하지만 안에 상태를 설정할 수 있는 로직을 포함한 함수이다. 커스텀 훅을 통해, 다른 컴포넌트에서 사용할 수 있는 로직을 커스텀 훅으로 아웃소싱할 수 있으며, 이를 통해 다양한 컴포넌트에서 호출이 가능하다. 아래 코드에서 사용된 BackwardCounter와 ForwardCounter는 App에서 컴포넌트로 사용되고 있다. ForwardCounter와 BackwardCounter는 모두 useState와 useEffect를 통해 상태를 관리하고, 시간 간격을 만들어서 매 초 마다 새로운 카운터 상태를 설정한다. 똑같은 일을 하지만 한 가지 다른점은 역방향으로 카운팅을 한다. 이 것 외에.. 2023. 2. 2. 이전 1 ··· 19 20 21 22 23 24 25 26 다음 728x90 728x90
