Web Development/React21 React /part.3 상수 데이터 상수 데이터 이번 글에서는 상수 데이터에 대한 개념과 활용법에 대해 다룹니다. 리액트를 효과적으로 사용하기 위해서는 반복되는 UI를 하드코딩이 아닌 좀더 효율적인 방법으로 구현해야합니다. 그러기 위해서는 데이터 구조, map()사용에 익숙해지는게 중요합니다. 이를 통해 되도록 반복되는 작업들을 줄이고, 코드의 간결성을 유지하면 추후 유지보수를 할 때에도 훨씬 편리합니다. 1. 상수 데이터란? 상수 데이터란 이름 그대로 변하지 않는 정적인 데이터를 말한다. UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API들을 통해 가져올 필요가 없는 데이터들을 상수 데이터로 만든다. 2. 상수 데이터를 사용하는 이유 UI를 하드코딩으로 만들어두면 코드가 길어져 가독성이 떨어진다. ⇒ 유지보수의 어려움 상수 데이.. 2023. 4. 29. React/ part.3 useEffect useEffect 이전 글인 sideEffect에 이어 useEffect의 개념과 필요성 그리고 사용방법에 대해 다룹니다. sideEffect에 대해 모른다면 해당 링크를 통해 이전 글을 먼저 읽으시기를 추천합니다. 1. useEffect란? useEffect가 하는 일은 무엇일까? useEffect Hook을 이용하여 컴포넌트가 렌더링 이후에 어떤 일을 수행할 지 리액트에게 알려준다. React는 우리가 넘긴 함수를 기억했다가 DOM 업데이트를 수행한 이후에 호출한다. (이 함수를 ‘effect’라고 한다.) useEffect를 컴포넌트 안에서 불러내는 이유 useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 변수에 접근할 수 있다. 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값.. 2023. 4. 26. React / part.3 sideEffect Side Effect 해당 글에서는 리액트의 중요한 개념 중 하나인 useEffect hook에 대해 다루기전에 반드시 알아야할 sideEffect라는 개념에 대해 다룹니다. sideEffect는 프로그래밍에서 빼놓을 수 없는 개념입니다. sideEffect에 대한 해당 글을 읽은 후 useEffect에 대한 다음글을 읽으실 것을 추천합니다. 1. sideEffect란? 프로그래밍에서의 부작용 즉, 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과를 말한다. 특히 프로그램을 구성하는 가장 작은 단위인 “함수”에서 자주 사용되는 용어이다. 함수의 본질적인 역할은 input을 받아서 output을 산출하는 것이다. 그렇다면 함수의 sideEffect는? input을 받아서 output을 산출하는 것 이.. 2023. 4. 26. React/ part.3 state state 이번 글에서는 이전 글인 hook 과 props에 이어 state에 대한 내용을 다룹니다. 링크를 통해 바로 해당 글로 이동이 가능합니다. 또한 react에 관련된 글은 해당 카테고리로 올라가 있습니다. 1. state란? 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값? ⇒ 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값 컴포넌트 내부에서 가지고 있는 상태값 ⇒ 부모 컴포넌트와 상관없이 useState라는 내장 hook을 사용함 (주석으로 추가적인 설명을 달아두었습니다. 참고해주세요) import React, { useState } from 'react'; const Main = () => { const = [state, setState] = useState(); //.. 2023. 4. 24. React / part.3 props props 해당 글에서는 앞선 Hook에 대한 글에 이어 리액트에서 중요한 개념인 props에 대해 다룹니다. state에 대한 내용은 다른 글에서 자세히 다룹니다. 1. props란? 컴포넌트의 속성값 ⇒ 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체를 말한다. 부모 컴포넌트에서 이미 선언한 데이터를 자식 컴포넌트에서 사용하려고할 때 전달하고자 하는 어떤 값이든 자식 컴포넌트에 전달 가능하다. ⇒ 문자, 숫자, 변수, 함수까지 모든 타입의 데이터를 전달한다. 자식 컴포넌트에서 중복으로 선언할 수 없기 때문에 props를 사용한다. ⇒ 자식 컴포넌트에 속성처럼 주입하는 방식이다. 여기서 중요한 점은 Props는 읽기 전용이라는 것이다. 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 pro.. 2023. 4. 24. React/ part.3 Hook Hook? 해당 글에서는 리액트의 주요 개념인 props와 state를 다루기 전에 알아야할 Hoo에 대한 기본적인 개념 정리를 다루고 있습니다. 이어지는 게시글에서 props와 state에 대해 자세히 다룹니다. 1. Hook class component ⇒ function component 이전에 작성한 React part.2 component에서 hook의 등장으로 function component를 더 활발하게 사용하게 되었다고 언급한 바 있다. Hook은 상태 관리 및 라이프 사이클을 관리해주는 함수로서 함수 컴포넌트의 단점 보완한다. clacc component에서만 사용이 가능하던 기능을 function component에서도 사용할 수 있도록 연동해주는 함수이다. 다시 짧게 짚어보는 fun.. 2023. 4. 24. React/ part.2 Routing과 Router Routing과 Router 리액트에서 중요한 개념중 하나가 바로 라우팅이다. 라우팅은 무엇인지, 라우터는 무엇인지에 대해 제대로 알고 리액트를 사용해야 기초적인 실수를 피할 수 있다. 해당 글에서는 라우팅이란 무엇인지 알아보고 라우팅과 관련된 중요한 개념들에 대해서도 함께 다루고 있다. Routing, Router, react-router-dom, react-router-dom을 이용해 Routing을 하는 방법 2가지 1. Routing (라우팅)이란? 간단히 말해 다른 경로(url 주소)에 따라 다른 화면(view)을 브라우저에 출력하는 것을 말한다. 리액트는 UI를 그리는 라이브러리라서 routing기능이 내장되어 있지 않다. 그래서 따로 Routing Library라우팅 라이브러리가 필요하다. .. 2023. 4. 23. React/ part.2 component Components란? 이번 글에서는 component에 대한 기본적인 내용들을 다룹니다. Hook과 state에 대해서는 다른 글에서 더 자세히 설명하고 있습니다. 1. 컴포넌트의 정의 재사용이 가능한 UI 구성 단위 컴포넌트 기반의 개발로 복잡한 UI도 효과적으로 구성이 가능하다. 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고 그 조각들을 사용할 수 있다. 쉽게 말해, 레고블럭 같은 역할이다. 페이지 내부 여러 곳에서 호환될 수 있도록 만든 UI 레고블럭이라고 생각하면 된다. 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. 2. 컴포넌트의 특징 1. 필요한 곳에 가져와서 재사용이 가능하다. ⇒ export와 import 방식으로 2. 독립적으로 사용되어 유지보수에 용이.. 2023. 4. 22. React/ part.2 JSX JSX란? JSX(JavaScript Syntax eXtension) 리액트에서 사용하는 자바스크립트 확장 문법 HTML과 자바스크립트 로직을 하나의 자바스크립트 파일 안에서 모두 처리하기 위해 확장한 문법 태그처럼 생긴 문법 자바스크립트 정식 문법은 아니기 때문에 작성한 코드는 브라우저에서 동작하기 전에 Babel이라는 transcompiler를 통해 일반 자바스크립트 코드 형태로 변환된다. 자바스크립트 문법을 가져와 쓰기 때문에 편하다. 하지만 자바스크립트보다 직관적이다. JSX 문법에 맞게 작성하는 것이 제일 중요하다. JSX element 자바스크립트 파일 어디에서나 HTML처럼 작성이 가능하다. javaScript 표현식 값.. 2023. 4. 21. 이전 1 2 3 다음
