React

리액트 공식문서에서 틱택토 게임 만들기를 살펴보면 중간에 key에 대한 이야기가 나온다.(틱택토 게임 만드는 방법은 생략! https://ko.react.dev/learn/tutorial-tic-tac-toe ) 1. 리액트에서 리스트 항목에 대한 렌더링 리스트를 화면에 보여줄 때, React는 마치 메모장처럼 각 항목을 기억해둔다. 리스트가 바뀌면 (예: 새로운 항목 추가, 삭제, 순서 변경 등), React는 이전에 기억해둔 메모와 비교해서 실제로 무엇이 달라졌는지 찾아낸다. 장보기 목록을 적는다고 가정해보자.  리액트는 두개의 메모장을 가지고 이전 메모와 비교하여 장보기 목록에 '우유'를 추가했다면 → 새로운 항목이 추가된 것을 알아챈다.'계란'을 지웠다면 → 그 항목이 사라진 것을 파악한다항목들의..

1. 컴포넌트: UI 구성 요소 React의 핵심 개념인 컴포넌트는 마크업, CSS, JavaScript를 하나로 모아 독립적이고 재사용 가능하게 만든 UI 조각이다. HTML 태그와 마찬가지로 컴포넌트를 조합하여 전체 페이지를 구성한다. 마치 레고 블록처럼 한번 만든 컴포넌트를 여러 곳에서 재사용할 수 있다!컴포넌트 재사용의 주요 장점을 몇 가지 살펴보면: 반복적인 코드 작성 감소로 개발 시간이 단축, 동일한 컴포넌트를 사용해서 일관성 유지, 컴포넌트 수정 시 사용된 모든 곳에 자동 반영 되므로 모듈화 되어 관리가 쉬워짐 등  Docs 컴포넌트를 들여다 보면 마크업을 반환하는 함수로 이루어져 있다. export default function Profile() ..

React 앱은 컴포넌트로 구성된다.컴포넌트는 마크업을 반환하는 자바스크립트 함수로 작성한다.컴포넌트 명명은 대문자로 시작한다. ex) MyButtonJSX 문법이므로,   처럼 태그를 닫아줘야 한다. 여러 개의 JSX 태그를 반환할 수 없으므로 ... 와 같이 부모로 감싸주어야 한다. html문법을 jsx로 변환해주는 사이트: https://transform.tools/html-to-jsx function MyButton() { return ( I'm a button );}//컴포넌트 생성export default function MyApp() { return ( Welcome to my app );}//다른 컴포넌트 안에 중첩스타일 추가하기React에..

매번 CRA(create-react-app)으로만 프로젝트를 설정하다가 이번에는 vite로 진행해보았다.CRA에서 proxy 설정CRA는 proxy를 설정하기 위해 "http-proxy-middleware" 라이브러리를 별도로 설치하여 진행했다.npm install http-proxy-middleware//setupProxy.jsconst { createProxyMiddleware } = require("http-proxy-middleware");module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: process.env.REACT_APP_SERVER, changeOrigin: tr..

문제 상황 위의 사진에 적힌 타이틀을 컴포넌트로 사용해서 여러 페이지에 쓰려고 한다.interface ITitle { title: string; color: string;}const Title = ({ title, color }: ITitle) => { return {title};};export default Title; 이렇게 동적으로 props 내려서 color 설정해야지 ~ 했는데 웬걸 적용이 안된다. props가 안들어오나? 그건 또 아니다. 개발자 도구로 확인해보면 스타일이 들어온걸 확인할 수 있다. 흠.......뭘까알아보기tailwind dynamic classname 라는 키워드로 구글에 검색알고보니 테일윈드 공식문서에도 나와있는 내용이였다. https://tailwindcss.com..