열이의 개발블로그

create-react-app을 통해 프로젝트를 생성하고 useState를 작성하면 자동으로 react에 있는 useState를 import 해줍니다. import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => { setValue((prev) => prev + 1); }; return ( {counter} click me ); } export default App; counter를 만들고 버튼을 클릭하면 counter가 증가하는 로직을 작성해봅시다. function App() { const [counter, setValue] = useState(0); const..

React를 사용하면서 컴포넌트에 CSS를 적용하는 방법에 대해 단계별로 알아봅시다. ✅ 전역으로 CSS 설정 /* styles.css */ button { color: white; background-color: tomato; } src 폴더 안에 styles.css라는 파일을 생성한 뒤 button 태그의 스타일을 지정해줍시다. // index.js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import "./styles.css"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); ..

쉽게 React 프로젝트를 만들기 위해서는 create-react-app을 사용하여 많은 스크립트들과 많은 사전설정들을 미리 설정할 수 있도록 하는 것이 좋습니다. ✅ create-react-app 설치 node.js를 설치한 뒤 터미널에서 create-react-app을 통해 프로젝트를 생성합니다. $ npx create-react-app 프로젝트명 ✏️ npm과 npx의 차이 npm은 node.js의 의존성과 패키지 관리를 위한 패키지 매니저입니다. 프로젝트의 패키지를 설치할 때 npm install을 실행함으로써 package.json 파일에 있는 패키지들을 지정할 수 있다는 것을 의미합니다. 또한, 버전 관리를 지원하여 패키지의 버전을 명시해 원하는 버전을 설치하도록 할 수 있습니다. npx는 n..

✅ Props란? 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보낼 수 있게 해주는 방법 ✏️ Props가 필요한 이유 예제를 통해서 알아봅시다. function SaveBtn() { return ( Save Changes ); } function ConfirmBtn() { return ( Confirm ); } function App() { return ( ); } const root = document.getElementById("root"); ReactDOM.render(, root); 위의 코드는 SaveBtn 컴포넌트와 ConfirmBtn 컴포넌트가 존재하는 코드입니다. 두 개의 컴포넌트는 각각 버튼을 나타내고 다른 점이라고는 버튼 안에 있는 텍스트의 내용 뿐입니다. 이런 버튼들이 필요할 때마다 ..

✅ Select 태그 값에 따라 변하는 컴포넌트 웹을 개발하다보면 select 태그 값에 따라 변하는 내용을 만들어야 할 때가 있습니다. React에서는 변하는 내용을 컴포넌트화하여 select 값에 따라 다른 컴포넌트를 렌더링하는 방식을 사용합니다. 먼저 가장 Root 컴포넌트인 App에서 select 태그를 만들어봅시다. function App() { const [index, setIndex] = React.useState("xx"); const onSelect = (event) => { setIndex(event.target.value); }; console.log("render w/ ", index); return ( Super Converter Select your units Minutes & ..

✏️ React에는 controlled component와 uncontrolled component가 있습니다. 쉽게 설명하면 uncontrolled component(비제어 컴포넌트)는 ref를 통해 값을 가져올 수 있고 특정 행동이 있어야 값이 기록됩니다. 즉, 비동기적으로 값의 변화를 확인할 수 없다는 뜻 controlled component(제어 컴포넌트)는 state로 값을 기록하여 setState()를 통해 값을 업데이트합니다. 제어 컴포넌트는 비동기적으로 값이 변하는 것을 확인할 수 있습니다. function App() { const [minutes, setMinutes] = React.useState(); const onChange = (event) => { console.log(event..

✅ JSX는 HTML과 매우 유사합니다. 하지만 다른 점이 몇가지 존재하는데 이는 꼭 알아두어야 하니 알아보도록 합시다! ✏️ label, input 태그 연결 만약 HTML에서 label과 input을 연결하여 label을 클릭했을 때 input에 커서가 가도록 하고 싶다면 label엔 for 속성을 input엔 id 속성을 주어 연결하면 됩니다. Super Converter Minutes Hours 하지만 위의 문법은 JSX에서는 틀린 문법입니다. ✅ JSX에서 틀린 문법 위와 같이 코드를 작성했을 경우 틀린 문법이 됩니다. 하지만 아무런 오류를 확인할 수 없는데 이는 react를 production 버전으로 사용하고 있기 때문입니다. 버전을 development 버전을 사용한다면 콘솔에 오류가 발생..

리액트를 사용하여 버튼을 클릭하면 숫자가 증가하는 웹 페이지를 만들어보자. ✅ counter 변수와 render 함수 사용 위의 코드를 통해 Container라는 컴포넌트를 만들고 render 함수를 통해 Container를 root 안에 그린다. Container 안에는 button이 존재하고 이 button을 클릭했을 때 countUp이라는 함수가 실행된다. countUp은 let으로 선언된 counter를 하나 증가시키고 다시 render 함수를 불러 화면을 다시 그린다. 🚨 문제 여기서 문제는 변하는 무언가가 있을 때마다 render라는 함수를 호출해줘야 변화된 것이 새로 화면에 그려진다. 즉, 모든 변화 끝에는 render 함수를 호출해야 하는 안좋은 코드인 것이다. ✅ React.useStat..

React를 사용하기 전에 Vanilla JS(바닐라 자바스크립트)와 비교를 해봅시다. ✅ Vanilla JS Total clicks: 0 Click me 위의 HTML 코드는 "Click me"라는 버튼을 클릭하면 "Total clicks"의 숫자가 올라가는 코드입니다. 이러한 프로그램을 만들기 위해서 Javascript를 활용하여 counter라는 변수를 만들고 button과 span을 선택한 뒤 함수를 만들어 버튼을 클릭할 때 발생하는 이벤트리스너를 설정하여 counter의 숫자를 하나 늘리고 span 안의 텍스트에 counter를 다시 넣어줍니다. ✅ React CDN https://ko.legacy.reactjs.org/docs/cdn-links.html CDN 링크 – React A JavaS..

프론트엔드 개발자를 희망하는 사람이라면 누구나 들어봤을 법한 기술 스택인 React.js 프론트엔드 라이브러리, 프레임워크로 주로 사용되는 React.js와 Vue.js를 비교해보는 글입니다. ✅ React.js란? React.js는 Facebook에서 개발한 오픈소스 자바스크립트 라이브러리입니다. React.js는 사용자 인터페이스를 구축하기 위해 사용되며, 웹 애플리케이션에서 동적이고 반응형 UI를 만드는데 매우 유용합니다. ✅ React.js의 특징 컴포넌트 기반(Component Based) 아키텍처를 기반으로 하며, 이는 UI를 작은 조각으로 분할하고 각 조각을 독립적으로 관리할 수 있게 합니다. 다른 프레임워크와 다르게 MVC(Model - View - Controller) 아키텍처가 아닌 V..