React의 목적 React는 사용자의 입력에 반응하여 필요할 때마다 UI를 렌더링한다는 주요 임무를 갖고 있다. state나 event들의 특징을 보자면 화면에 무언가를 가져오는 것들이었다. 그리고 사용자가 그 무언가와 상호 작용하게 하는 것이 주된 목적이었다. JSX 코드와 DOM을 평가하고 렌더링하고 state와 props를 관리한다. 사용자 입력이 올바르게 반영되는지 확인하기 위해서 모든 component에 필요한 데이터가 있는지 체크한다. Side Effect란? side effect 혹은 effect라고 불리는 이것은 무엇일까? side effect는 애플리케이션에서 "범위 밖"을 함께 실행할 때 나타나는 모든 것을 말하며, component가 렌더링된 이후에 비동기로 처리되어야 하는 부수적인..
Ref란? ref는 참조를 뜻하는 reference의 줄임말로 React에서 자주 쓰이는 hook이다. 가장 기본적인 기능은 다른 DOM 요소에 접근해서 참조하여 작업할 수 있게 해주는 것이다. ref에 대해서 설명하기 전에 기존의 코드에 대해서 먼저 언급을 하고 넘어가겠다. 더보기 // 📂 addUser.js import React, { useState } from "react"; import Card from "../UI/Card"; import Button from "../UI/Button"; import Wrapper from "../Halpers/Wrapper"; import ErrorModal from "../UI/ErrorModal"; import styles from "./AddUser.m..
문제의 발단 앞서 배운 Flagment와 더불어 간결한 코드를 작성하는 데 도움을 주는 기능이 있다. 아래의 예를 살펴보자. 이 코드를 실제 DOM으로 렌더링하게 되면 오른쪽 HTML처럼 렌더링 될 것이다. 이 코드 자체에는 문제는 없지만 코딩 방식에 문제가 있다. Modal은 의미적이거나 간결한 HTML 구조를 갖추는 관점에서 보면 별로 좋지 못하다. 기본적으로 Modal은 페이지 위에 표시되는 overlay이기 때문이다. Modal은 전체 페이지에 대한 overlay며 다른 것 위에 있다. 그런데 이런 Modal이 HTML 코드 안에 중첩되어 있다면 기술적으로는 스타일링 덕분에 잘 작동하더라도 문제가 발생할 수 있다. 만약 overlay 내용이 중첩되어 있다면, 렌더링 되는 HTML 코드를 해석할 때..
JSX의 제한 사항[요구 사항] React는 JSX로 작업한다. JSX는 component에서 반환되는 코드로 React는 이 코드를 실제 DOM으로 렌더링한다. 하지만 JSX에는 제한 사항이 존재한다. return ( Hi there! This does not work :~( ) ; 만약 위의 코드처럼 component의 return 값에 복수의 JSX 요소들이 있다면 오류가 발생한다. 즉, root-level에서는 두 개의 JSX 요소가 인접해 있다면 다른 JSX 요소에 의해서 반환되거나 변수에 저장되지 않는다. React에서는 일반적으로 root JSX 요소가 하나여야만 한다. 저장하거나 반환하는 가장 위의 요소는 반드시 하나여야 한다. 그 이유는 명확한데, JavaScript에서는 둘 이상의 값을..
스타일의 범위 국한시키기 React에서 CSS를 활용하여 스타일을 적용시키고 동적으로 할당하기도 했었다. 기본적인 React의 CSS 적용 방식은 import "./CSSFileName.css";와 같이 사용한다. 해당 방식에는 한 페이지에서 여러 component들의 CSS 파일을 공유하여 모든 스타일들이 전역으로 사용하게 된다. 이는 DOM 어딘가에 명명한 class와 같은 이름을 가진 class가 존재한다면 해당 스타일이 그 대상에게까지 영향을 미친다는 것을 의미한다. 이는 기본적으로 스타일의 범위가 정해져 있지 않기 때문이다. 물론, CSS를 명명할 때 조금 신경만 쓴다면 꼭 문제가 되지는 않는다. 그것들은 결국 일반적인 CSS고 어떤 이름이라도 사용할 수 있기 때문이다. 그리고 선택하는 여러 요..
