리액트 작업 중에 wrapper라는 공통 클래스를 주었습니다.이 wrapper는 Header, Footer, MainPage 등 여러 페이지에서 공통으로 사용되는 클래스인데요.하지만 MainPage에서만 wrapper에 다른 스타일을 추가해주어야하는 상황이 되었습니다.구글링 해보니 다행히 일반클래스도 주고 모듈클래스도 주는 방법이 있더라구요. 바로 [ classnames ] 라는 라이브러리를 설치하여 사용하는 것입니다.사용방법은 아래와 같습니다. 1. 터미널 창에서 [ npm install classnames ] 명령어 입력 2. 일반, 모듈 css를 함께 사용할 페이지에 아래 코드 입력import classNames from 'classnames'; 3. 아래처럼 코드 입력

이번엔 리액트 라우터 구현에 대해서 공부해보겠습니다.리액트 라우터를 설치하면 페이지 이동이 쉽게 가능하게 됩니다.  🎁 리액트 라우터 설치 및 설치확인 1. 터미널 열기 (ctrl + ` or ctrl + J)2. [ npm install react-router-dom ] 명령어 입력3. [ package.json ] 파일 내에 react-router-dom이 추가되었다면 설치 완료! :)  🎁 라우터 사용하는 방법 (App.js - BrowserRouter, Route, Routes) 1. 먼저, 사용할 것을 import 시켜주어야합니다.import { BrowserRouter , Route, Routes } from "react-router-dom"; 2. App 전체를 BrowserRouter로..

오늘은 리액트 props와 map()에 대해서 알아보도록 하겠습니다.props는 properties의 약자로 '속성값'을 의미하고 map()은 반복문에 사용합니다.  🐾 Props 이해하기 이전 시간에 만든 컴포넌트에 어떤 값을 전달하겠습니다.아래처럼 app.js에 Hello 컴포넌트에 age={}로 값을 전달합니다.여기서 따옴표를 쓰지 않은 이유는 문자가 아닌 숫자로 전달하기 위해서 입니다.import './App.css';import Hello from './component/Hello';function App() { return ( );}export default App;  그리고 Hello.j..

오늘은 리액트에서 state를 어떻게 관리하는지 알아보도록 하겠습니다.state는 상태라는 뜻을 가지고 있는데요.즉, 컴포넌트가 가지고 있는 속성값을 state 라고 부르며, 이 속성값이 변하면 리액트는 자동으로 UI를 업데이트 시켜줍니다.그래서 우리 개발자들은 이 state를 잘 관리해야 합니다 :)  💻 버튼 클릭 시 텍스트 변경되는 함수 생성해보기 먼저 아래 코드에 대해서 설명해 드리겠습니다. export default function Hello() { let name = "Mike"; function changeName() { name = name === "Mike" ? "Jane" : "Mike"; } return ( stat..

리액트에서 이벤트 처리하는 방법입니다.사실 js에 대해 공부해본 사람들은 이 부분은 코드만 봐도 이해가 갈 것이라고 생각합니다.저 역시도 우선 코드만 적어두어도 나중에 충분히 참고하여 프로젝트를 진행할 수 있을 것 같아 빠르게 코드만 적어두고 다음 스텝으로 넘어가도록 하겠습니다 :)  리액트에서 이벤트를 처리하는 방법으론 크게 두 가지 방법으로 나눌 수 있겠습니다. 1. 미리 함수를 만들어두고 전달하는 방법2. 이벤트 내에 직접 함수를 적어주는 방법. 아래와 같은 다양한 방법들로 이벤트 처리가 가능합니다 :)상황에 따라 더 편리한 방법으로 이벤트 처리를 하면 될 것 같습니다.export default function Hello() { function showName(){ console...

리액트 세팅이 끝났으니, 컴포넌트를 만드는 방법을 정리해보겠습니다 :)해당 글 역시 '코딩앙마'님의 강의를 보면서 공부한 내용을 정리하고 있습니다.  🐾 컴포넌트 파일 생성하기App.js 안에 함수형 컴포넌트가 있습니다.App.js 파일을 참고하면서, 새로 컴포넌트 파일을 생성하여 하나의 파일 안에 하나의 함수형 컴포넌트를 만듭니다. 먼저, src 폴더 내에 component폴더를 생성하고 그 안에 여러 컴포넌트를 생성해주겠습니다. 강의 내용에 따라 Hello.js / Welcome.js / World.js 라는 세 가지 파일을 생성해주었습니다.이때, 첫 번째 문자는 꼭 대문자를 사용해주어야 하는 것을 잊으시면 안됩니다 :)  🐾 컴포넌트 작성법 3가지컴포넌트를 작성하는 방법은 3가지가 있습니다. 1..