yoon-arc의 코딩 일지

목차 (눌러서 이동 가능) 📌 SSR (Server Side Rendering): 서버에서 HTML 렌더링 후 클라이언트로 전송 ⚙️ SSR의 동작 순서 ⭐ SSR의 장점 🔧 SSR의 단점 📌 CSR (Client Side Rendering): 클라이언트(브라우저)에서 렌더링 ⚙️ CSR의 동작 순서 ⭐ CSR의 장점 🔧 CSR의 단점 📌 SSR, CSR 어느 쪽이 더 좋다? 📌 SPA(Single Page Application)와 MPA(Multi Page Application) ..

이번 포스팅에선 리액트로 간단한 단어장을 만드는 예제를 진행할 예정입니다!   저는 폴더 구조를 위와 같이 설정했습니다. Project04는 최상위 컴포넌트로 App.js처럼 모든 하위 컴포넌트를 포함하는 역할을 합니다.프로젝트를 형성하는 모든 하위 컴포넌트는 components 폴더에 정리했습니다.폴더 구조가 저와 다를 경우, import 시 경로만 주의해 주시면 됩니다. /Project04.jsimport Header from "./components/Header";import style from "./Project04.module.css";const Project04 = () => { return ( );};export default Project04; /componen..

상태(state)는 컴포넌트가 가진 동적인 값으로, 리액트는 상태가 변하면 자동으로 UI를 리렌더링합니다.여기서 렌더링이란, 컴포넌트가 UI를 반환하는 행위이며 리렌더링이란 state 또는 props의 변화로 인해 UI가 다시계산되는 과정을 말합니다.자세한 내용은 추후 다룰 예정이니, 화면을 다시 그리는 작업 정도로 이해해 주세요! 아직까진 state의 역할이 크게 와닿지 않았죠? Counter 컴포넌트를 예시로 살펴보겠습니다.import style from "./Counter.module.css";const Counter = () => { let count = 0;//현재 값 return ( Counter without useState {count} ..

이번 포스팅에서는 리액트에서의 이벤트 처리 방법을 살펴보겠습니다. 오늘 살펴볼 예제는 button태그와 input 태그 총 2개이며,각 예제마다 바닐라 js 코드를 먼저 보고 이어서 리액트에서의 코드를 살펴볼 예정입니다.(리액트에서의 방법은 1. 함수 전달 방식 2. 인라인 사용 방식 총 두 개입니다)  📌 button태그 이벤트 처리먼저 바닐라 js부터 살펴보도록 하겠습니다.  Hello! This is ... Name Age   위 코드를 리액트로 작성하게 될 시 아래와 같습니다  ⚙️리액트 - 인라인 함수 사용 방식미리 정의한 함수를 onClick 속성에 전달하여 이벤트를 처리할 수 있습니다.전달하고자 하는 내용은 문자열이 아니기 때문에 {}로..

HTML에서 CSS을 적용하는데 다양한 방법이 있듯리액트에서도 다양한 방법을 통해 CSS를 적용할 수 있습니다.이번 포스팅에서는 별도의 모듈 설치 없이 CSS를 적용하는 방법을  세 가지를 설명하겠습니다.1. inline style 사용2. css file을 통한 stylesheet 사용3. style.module.css file 사용  📌인라인 스타일(Inline Style)인라인을 통해 스타일을 지정할 시 태그 안에 style = {}를 작성한 뒤 css 정보를 담은 객체를 작성하면 됩니다.key로 속성을, value로 속성 값을 넘겨주며 객체기 때문에 세미콜론(;)이 아닌 콤마(,)로 구별해야 합니다.js 기반이기 때문에 하이픈으로 글자를 구별했던 기존 css와 달리, 인라인으로 전달할 시 카멜케..