useState VS useRef 뭐가 더 효율적 인가? useState와 useRef의 기능상의 공통점은 함수형 컴포넌트에서 동적으로 상태 관리를 할 수 있게 해준다는 점입니다. useState import React, { useState } from 'react' function App() { const [count, setCount] = useState(0) const addButton = () => { setCount(count + 1) } return ( {count} ) } export default App 위에 예시 처럼 count 나 간단한 작업은 useState가 효율적으로 생각합니다. useRef import React, { useRef, useEffect, useState } from..
1. Component 컴포넌트는 리액트의 핵심 빌딩 블록 중 하나입니다. 즉 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성되죠. 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어줍니다. 그렇지만 우리 모두, 리액트 이전에 프론트엔드 개발 환경을 경험하시지 못했다면 무엇이 불편했고 리액트와 같은 컴포넌트 기반의 UI 라이브러리가 무엇을 편하게 해주는지 모르실 거에요. 시작하면서 얘기드렸듯, 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체입니다. 말이 조금 어려운데, 이전 실습에서 경험했듯이 컴포넌트를 생성하고 보여지고자 하는 UI 요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이를 리액트가 화면에 그려..
State란 무엇인가? State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. 왜 바뀌어야 할까요? 목적은 하나에요. 바로 UI(엘리먼트)로의 반영을 위해서죠. 우리가 앞에서 name이라는 정보를 const name = “홍부인”; 이라고 만들었는데, 만약 name이라는 값이 바뀌어야만 하는 정보였어야 했다면 state로 생성합니다. GrandFather 컴포넌트에서 기존에 있었던 const name = “김할아” 라는 코드가 const [name, setName] = useState("김할아"); 라는 익숙하지 않은 코드로 바뀌었네요. import React, { useState } from 'react'; function GrandFather() { const [name, setName] = ..
props란 무엇일까요? 컴포넌트 끼리의 정보교환 방식! 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터에요! 다시 말해, 컴포넌트 간의 정보 교류 방법입니다. 아래에서 계속 나올 2가지 내용을 반드시 기억해주세요! props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향). props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다. Props에 대해 알아봅시다. 우리가 수없이 연습한 이 코드를 다시 봅니다. Mother 컴포넌트에서 못보던 코드가 생겼습니다. mother의 이름이 생겼습니다. 하지만 우리 Child는 지금 Mother의 이름을 모르는데요. 어떻게 해야 Child 컴포넌트에서 Mother의 이름을 알 수 있을까요? // src/App.js ..
React Component란 무엇일까요? 컴포넌트 개념 이해하기 공식문서에서 설명하고 있는 부분을 통해 올바른 개념을 이해해봅시다! 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 ****입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 리액트 컴포넌트를 표현하는 두 가지 방법 1. 함수형 컴포넌트 // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return) function Welcome(props) { return Hello, {props.name}; } ..
불변성(immutability) 이란? 불변성이란 한번 생성된 원본의 데이터는 변경시키지 않고, 데이터 변경 필요 시 새로운 원본을 만드는 디자인 패턴 불변성X → mutable 원본 데이터가 변할 수 있다는 의미 배열의 push 메소드 const arr = [1,2,3,4,5]; arr.push(6); console.log(arr); // [1,2,3,4,5,6] // push 메소드는 원본 배열인 arr의 값 자체를 변경시킨다. 불변성O → immutable 원본 데이터가 변할 수 없다는 의미 배열의 map 메소드 const arr = [1,2,3,4,5]; arr.map(el => el * 2); // [2,4,6,8,10] 이 리턴됨. console.log(arr); // [1,2,3,4,5] /..