리액트

이번에 진행 중인 프로젝트에서 로그인 여부에 따라서 다르게 렌더링 해야 하는 컴포넌트가 늘어갔다.로그인 여부를 전달하기 위해서 내가 선택한 방법은 최상단 컴포넌트에서 토큰을 확인해서 변수에 담아두는 방식이었다. 그리고 이 값이 필요한 자식 컴포넌트의 props 값으로 로그인 여부를 전달했다.이러한 경우에는 A 컴포넌트는 로그인 여부 값이 필요하지 않지만 A 컴포넌트의 자식인 B 컴포넌트에는 그 값이 필요하기 때문에 A 컴포넌트도 로그인 여부 값을 가지고 있어야 한다. 컴포넌트 depth가 깊어 지거나 하면 관리가 복잡해지는 구조를 가지게 될 것이다. 그러다 React의 Context API를 알게되었다. context를 사용하면 데이터를 전역으로 관리하고 사용할 수 있다. const App = () =>..

컴포넌트 안에 메서드를 만들어서 간단한 이벤트를 처리해보자! 위와 같은 화면이 있고 요구사항으로는 1. 입력 버튼에 마우스가 올라가면 색이 변해야 한다. 2. 마우스가 버튼에서 나가면 색은 다시 돌아와야 한다. 3. 이름을 입력하고 버튼을 누르면 "안녕하세요"가 "감사합니다"로 변해야 한다. 우선 1, 2번을 해결해보자! import React, { useState } from "react"; function App() { const [isMousedOver, setMouseOver] = useState(false); function handleMouseOver() { setMouseOver(true); } function handleMouseOut() { setMouseOver(false); } ret..

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. MDND에서 가져온 구조 분해 할당에 대한 설명이다. 말 그대로 배열이나 객체를 분해해서 값을 가져올 수 있는 걸 말한다. const animals = [ { name: "cat", sound: "야옹" }, { name: "dog", sound: "왈왈" } ]; animals이라는 배열이 있다. 동물의 이름과 소리에 대한 정보를 가진 객체가 2개 있다. animals 배열을 분해해보자! import animals from "./data"; const [cat, dog] = animals; console.log(cat); console.log(dog); 우선 animals ..

import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( 0 + , document.getElementById("root") ); 오른쪽과 같은 UI가 있다. + 버튼을 누를 때마다 숫자가 하나씩 올라가게 만들어 보자! 왼쪽과 같은 html 코드로는 이 기능을 만들 수 없다. 증가되야하는 숫자를 변수로 만들고 +버튼이 눌릴 때마다 숫자를 올려주는 메서드를 만들면 될 거 같다! import React from "react"; import ReactDOM from "react-dom"; var count = 0; function increase() { count++; console.log("클릭!"); } ReactDOM.re..

이전 글(2022.03.30 - [Programming/React] - 컴포넌트로 반복 작업 줄이기!!)에서 반복적인 html을 리액트의 컴포넌트를 통해서 간편화 하는 방법을 알아보았다. 하지만 3개의 연락처를 보여주기 위해서 Contact 컴포넌트를 3번 만드는 작업도 역시나 반복적이다. 그러면 어쩐단 말이야! 이번에는 map()을 이용해서 반복되는 코드를 확 줄여보자! ReactDOM.render( 연락처 , document.getElementById("root") ); 위 코드는 지난번에 작성했던 3개의 연락처를 뿌려주는 코드이다. 같은 결과물을 만드는 거지만 컴포넌트와 map()를 이용하면 아래와 같이 상당히 간단하게 결과물을 만들 수 있다.!!!! import React from "react";..

오른쪽 그림과 같은 결과물을 하드 코딩으로 만들면 아래와 같다. import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( 연락처 선인장 010-1234-1234 b@cactus.com 강아지 010-8888-8888 jack@doggy.com 고양이 +918 372 574 gmail@kitty.com , document.getElementById("root") ); 현재 연락처에는 선인장, 강아지, 고양이만 있어서 다행이지만 연락처가 추가되면 지금처럼 하드코딩으로 하기에는 무리가 있다!! 이럴때 리액트의 특징 중 하나인 컴포넌트를 사용해서 더 손쉽게 연락처 결과물을 만들어 보자! 여기서 잠깐! 리액트의 컴포넌트란? CS에서..