JSX 설명 JSX 문법 사용 O JSX 문법 사용 X 두 코드를 비교했을 때, JSX 문법을 사용한 코드가 가독성이 훨씬 좋다. JSX 공식 문서 링크 : https://ko.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org const element = Hello, world!; 위에 희한한 태그 문법은 문자열도, HTML도 아니다. JSX라 하며 JavaScript를 확장한 문법이다. JSX는 React “엘리먼트(element)” 를 생성한다. JSX란? 더보기 React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시..

리액트 18에서 ReactDOM.render 함수를 사용하고 npm start를 했는데, 다음과 같은 에러 메시지가 콘솔창이 띄워졌다. Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot How to Upgrade to React 18 – React Blog As we shared in the release post, React 18 introduces fe..

HTML, CSS JavaScript 프로젝트에 리액트를 추가하는 방법 웹사이트에 React 추가 React는 처음부터 점진적으로 도입할 수 있게 설계되었다. 그래서 React는 필요한 만큼만 사용하면 된다. 아마 기존 페이지에 "상호작용'이라는 조미료를 첨가하기만 하고 싶을 수도 있다. 이럴 때 React 컴포넌트를 쓰면 좋다. 오늘날 웹사이트의 대부분은 싱글 페이지가 아니고 그래야 할 필요도 없다. 빌드 도구 없이 몇 줄의 코드만으로 웹 사이트의 작은 부분에 먼저 React를 도입해보아라. React의 비중을 천천히 늘릴 수도 있고 아니면 동적인 위젯을 몇 개 추가하는 것으로 끝낼 수도 있다. react 공식 문서 링크 : https://ko.reactjs.org/docs/add-react-to-a-..

리액트의 모듈화 아이디어 React는 무엇이고, 사람들은 왜 쓸까? React가 어떤 문제를 해결해주는지 이해해 보자. 지금까지 웹사이트를 만들기 위해 배웠던 방식들 1.index.html에서 style.css와 script.js 파일을 불러오기 2. index.html에 태그와 태그로 css, javascript 코드를 바로 작성하기 하지만 우리가 실제로 만들어야 하는 웹사이트는 이렇게 간단하지 않다. 구현해야 하는 기능이 많아져서 JavaScript가 복잡해지면 하나의 script.js파일 안에 모든 코드를 넣기가 힘들어 진다. ex) 이 script 코드가 어떤 element를 제어하고 있는지 잘 파악하기 힘들고, 가독성도 안 좋아짐 ex) 변수 선언 시 겹치지 않도록 계속 신경써줘야 함 ➡ 여러 ..

문제 You are given an n x n 2D matrix representing an image, rotate the image by 90 degrees (clockwise). You have to rotate the image in-place, which means you have to modify the input 2D matrix directly. DO NOT allocate another 2D matrix and do the rotation. 이미지를 나타내는 n x n 2D 매트릭스가 제공되면 이미지를 90도(시계 방향) 회전합니다. 이미지는 제자리에서 회전해야 합니다. 즉, 입력 2D 매트릭스를 직접 수정해야 합니다. 다른 2D 매트릭스를 할당하지 않고 회전을 수행합니다. 예시 Exam..