hook은 웹 사이트의 상호 작용을 가능하게 하고 변경 가능한 상태를 만드는 방법입니다. React는 실시간 웹 상호 작용으로 인해 새로고침을 하지 않아도 실시간으로 결과가 반영되는 부분에 있어서 장점이 있습니다. 다만 평범하게 React로 코드를 구성했다고 해서 실시간으로 반영이 되는 것이 아니라 hook을 사용해야 합니다. 간단한 프로그램을 만들어 보면서 학습해보도록 하겠습니다. import React from "react"; import ReactDOM from "react-dom"; var count = 0; function increase(){ count++; console.log(count); } ReactDOM.render( {count} + , document.getElementById("..

React 는 실시간으로 상태값이 변동됨에 따라 스타일, 구성, 및 구조가 변경되기 때문에 상태 변동에 예민합니다. 예를 들어 물이 일정 수준의 온도 이하로 내려가면 얼음이 되고, 다시 온도가 올라가면 물이 되듯이 React도 어떠한 상태에 따라 결과가 변하게 됩니다. 이런 상태를 state 라고 합니다. state를 변경할 때마다 새로이 동작되는 React 프로그래밍 방식에는 대표적으로 선언적 프로그래밍, 명령형 프로그래밍 두 가지가 있습니다. Declatative Programming (선언적 프로그래밍) var isDone = false; function strike() { isDone = true; } function unStrike() { isDone = false; } function App(..

이번에는 간단한 로그인 페이지를 구성해보고 추가적으로 조건에 따른 렌더링에 대한 작업에 대해 알아보겠습니다. Index.html 렌더링될 페이지입니다. index.js에 렌더링되는 내용들을 포함되어있고, root 영역에 렌더링 될 것입니다. Index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App"; ReactDOM.render(, document.getElementById("root")); render 함수를 통해 index.html에 root 영역에 렌더링 App 컴포넌트를 렌더링시킵니다. App.jsx import React from "react"; import Login..

이전까지는 동일한 태그에 각자 다른 정보를 넣으려면 Props를 일일히 다르게 지정해서 컴포넌트를 호출해야 했습니다. 규모가 작은 프로젝트 같은 경우에는 괜찮겠지만 이외의 프로젝트 규모에 따라서 기존의 방식대로 하는 것은 비효율적이라고 볼 수 있습니다. 이를 보완하기 위해 Mapping 시키는 다른 방법이 있으므로 이번에는 그 방법에 대해서 알아보겠습니다. 기존의 방식 import React from "react"; import Card from "./Card"; import contacts from "../contacts"; function App() { return ( My Contacts ); } export default App; Card 컴포넌트를 수동으로 반복 호출하는 다소 비효율적인 방식이라..

이번에는 React App을 좀 더 작은 구성 요소로 분리하면서 개발자 도구(DevTools)로 확인하는 과정에 대해서 알아보겠습니다. 그 과정에서 반응하는 개발자 도구(DevTools) 사용법을 배워서 이 모든 구성 요소를 디버그하고 관리할 수 있습니다. 예시 코드 index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App"; ReactDOM.render(, document.getElementById("root")); contacts.js const contacts = [ { id: 1, name: "Beyonce", imgURL: "https://blackhistorywall..

Props 는 렌더링 호출되는 컴포넌트들의 속성 값들이라고 볼 수 있습니다. 태그를 처음 다뤄본다면 위와 같이 여러 동일한 컨텐츠들을 수작업으로 일일히 하나씩 추가해야했을 것입니다. 이것을 보완해서 작성해보겠습니다. 반복되는 내용들을 단일 function 한 개로 만든 다음 렌더 함수에서 해당 Card 를 세 번 불러오기만 하면 반복적으로 내용들을 불러올 수 있습니다. 렌더링 함수 쪽에 보면 형식으로 마치 컴포넌트를 불러오는 것처럼 호출할 수도 있고, {Card()} 형식을 통해 같은 파일 내에 js 요소를 불러오는 형식으로도 호출할 수 있습니다. 하지만 단일 요소를 반복적으로 사용하는 것이기 때문에 당연히 비욘세 사진만 나옵니다. 따라서 재사용한 카드 구성 요소 각각에 다른 정보 조각들을 넣어주어야 합..