Front-end/React
-
[React] 컴포넌트 알아보기Front-end/React 2020. 11. 29. 23:25
컴포넌트 컴포넌트는 독립적으로 사용가능한 모듈인데요 컴포넌트 하나를 구현하여 어디서든 독립적으로 사용할 수 있게 할 수 있어야합니다. 컴포넌트를 만들 땐 몇가지 필수적으로 넣어주어야 하는 것이 있습니다. 리액트 사용하기 import React from "react"; react를 가져와서 사용하겠다는 것을 의미합니다. 클래스 컴포넌트 import React, { Component } from "react"; class Hello extends Component { render() { return ( 안녕하세요 ); } } Component를 가져와서 상속받아 사용해야합니다. 최근에는 Hooks + 함수형 컴포넌트로 인해 많이 사용되고 있는 패턴은 아닙니다. 함수 컴포넌트 import React from ..
-
[React] React-Router를 활용해 원하는 페이지로 이동하기Front-end/React 2020. 11. 9. 01:55
React-Router 리액트 라우터는 여러 페이지들을 연결시켜주는 역할을 하는 친구입니다. 리액트 자체에서 지원해주는 기술은 아니지만 리액트에서 라우팅을 한다면 이 서드파티를 사용하는 것이 국룰로 자리잡았습니다. 그만큼 간편하고 성능이 뛰어나단 소리겠죠? 이전에 순수 Javascript로 SPA를 구현해보면서 동작 방식을 이해 했었는데요, 이 글을 읽기 전 한 번 읽고 보시면 조금 더 이해는데 있어 좋을 것 같습니다. :) 구현할 예제는 헤더를 가지고 있는 페이지 2개와 헤더를 가지지 않는 페이지 1개를 이용해 각 상황을 고려한 라우팅을 해보려고 합니다. 핵심적인 내용을 살펴보면서 구현해보겠습니다. ❗️ 이 글은 개인적으로 학습한 정보와 지식을 토대로 작성된 글입니다. 혹시 잘못된 부분이 있거나 수정사..
-
[React] useEffect Hooks 알아보기Front-end/React 2020. 7. 1. 14:03
useEffect 컴포넌트가 최초, 업데이트, 사라질 때 특정 작업을 할 수 있도록 해줍니다. useEffect 선언하기 import React, { useEffect } from "react"; useEffect 사용하기 useEffect(function, dependencies); function에는 실행할 함수를, dependencies에는 의존할 값을 나타냅니다. 컴포넌트가 최초 화면에 렌더링 될 때만 실행 useEffect(() => { console.log("컴포넌트가 화면에 나타남"); // mount }, []); 빈 배열을 넣게 되면 의존하는 값이 없어 최초 화면에 렌더링 될 때만 실행됩니다. 이를 mount 된다라고 표현합니다. 보통 mount에 사용되는 기능에는 아래와 같습니다. pr..
-
[React] useState hooks 알아보기Front-end/React 2020. 7. 1. 14:01
useState 동적인 상태값을 관리할 때 사용합니다. 기존에 함수형 컴포넌트에서는 상태관리가 불가능 했지만 16.8 버전 이후에는 useState를 활용하여 상태값을 관리할 수 있게 되었습니다. 카운팅 예제를 통해서 상태값 관리를 알아보겠습니다. 이벤트 선언 import React from "react"; function Counter() { const onIncrease = () => { console.log("+1"); }; const onDecrease = () => { console.log("-1"); }; return ( 0 +1 -1 ); } export default Counter; 각각의 버튼별 onClick 이벤트를 가지며 해당 함수를 정의하여 선언해줍니다. 이 때 주의할 점으로 즉시실..