이롭게 현명하게

목차 props란? props 특징 props 사용법 [props란?] props(properties) : 어떠한 값을 컴포넌트에게 전달해줘야 할 때 props를 사용한다. Component에게 전달되는 props는 파라미터를 통하여 조회할 수 있다. props는 property의 의미로 재산이라는 뜻도 있지만 속성, 특성이라는 뜻도 가지고 있다. props는 Component의 입력으로 들어간다. props는 Component의 입력으로 들어간다. 리액트에서 props는 React Component의 속성이다. Component : 붕어빵 틀 Element : 붕어빵 props : 붕어빵 재료 같은 붕어빵이라도 넣는 재료에 따라 다른 맛이 난다. 이처럼 props는 같은 React Component에서..

목차 JSX란? JSX 역할 JSX사용 시 장점 JSX 사용 규칙 JSX 안에 자바스크립트 값 사용하기 style과 className을 설정하는 방법 JSX에서의 주석 JSX [JSX란?] JSX(Syntax Extension to Javascript) : 리액트에서 생김새를 정의할 때 사용하는 문법이다. JSX는 리액트를 사용하여 개발할 때 거의 필수적으로 사용해야 한다. 자바스크립트의 확장 문법이라는 의미를 가지고 있다. 자바스크립트와 XML.HTML을 합친 것이라고 생각하면 이해하기 쉽다. 얼핏 보면 HTML 같지만 실제로는 자바스크립트다. const element = Hello, World! 위 코드는 대입 연산자 equal이 나온다. 대입 연산자는 오른쪽에 있는 값을 왼쪽에 있는 변수에 대입해 ..

목차 Component란?Component 만들기Component의 이름  [Component란?]리액트는 Component 기반의 구조라는 특징을 가지고 있다.리액트는 모든 페이지가 Component로 구성되어 있고 하나의 Component는 또 다른 여러 개의 Component의 조합으로 구성될 수 있다.이러한 Component들을 마치 레고 블록을 조립하듯 끼워 맞춰 새로운 Component를 만들 수 있다. Component : 입력(props)을 받아 출력(Element) 하는 역할 코드 양을 줄일 수 있다.개발 시간을 줄일 수 있다.유지 보수 비용이 줄어든다. 더보기Component를 사용해야 하는 이유 에어비앤비 홈페이지다.  에어비앤비의 Component는 다음과 같다.파란색 Compone..

목차 작업환경 준비하기Node.js 설치하기yarn 설치하기vscode 설치하기git for windows 설치하기리액트 환경설정 리액트 환경을 설치하는 CRA가 2025년 2월 14일에 종료되었습니다.npx create-react-app 대신 vite로 설치 원하시는 분들은 아래 링크를 확인해 주세요.https://devyihyun.tistory.com/230 [React] vite로 리액트 설치하기목차 create-react-app 지원 종료vite를 사용하는 이유vite 시작하기 [Create-React-App 지원 종료]npx creat-react-app은 리액트를 시작하게 해 준 간편한 도구였다.복잡한 설정 없이도 바로 개발을 시작할 수 있devyihyun.tistory.com [작업 환경 준..

[Node.js 설치] yarn을 설치하기 위해서는 node.js를 설치해야한다. 단축키 윈도우 + Q를 눌려 cmd를 실행한다. node -v 명령어를 입력하고 Enter키를 누른다. 결과가 다음과 같이 버전이 나온다면 설치가 되어있다. 만약 버전이 나타나지 않는다면 node.js를 설치해야한다. node.js 설치하기 https://devyihyun.tistory.com/166 [yarn 설치하기] yarn은 npm을 대체할 수 있는도구로 npm보다 더 빠르며 효율적이다. 또한 캐시 시스템과 기타 부가기능을 제공한다. npm에 이미 익숙하고 진행 흐름에 변화를 주고 싶지 않다면 yarn을 설치하지 않아도 무방하다. yarn은 npm으로 설치하거나 또는 yarn 공식 홈페이지에서 다운받아 설치하는 방법..

목차 리액트란장단점 [리액트란?]자바스크립트를 사용해서 HTML로 구성한 UI에 DOM을 변형시키거나 기능을 추가해 보았다면 어떻게 만들었는지 알 것이다.* DOM : HTML 각 Element에 대한 정보를 지닌 자바스크립트 객체DOM을 변형하려면 브라우저의 DOMSelector API( getElementById ,querySelector 등 )를 사용하여 특정 DOM을 선택한 뒤에 특정 이벤트가 발생하면 변화를 주는 작업을 해야 한다.HTML에서 태그를 사용하여 id를 부여하고 자바스크립트(.js)에서 getElementById를 사용해 DOM을 선택하는 DOMSelector API 사용한다. 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 및 프레임워크이다.특히 싱글 페이지 애플..