![]()
1. 개요이번에는 defaultProps와 child에 대해서 알아보겠다. 2. defaultPropsdefaultProps는 말그대로 컴포넌트에 해당 props가 존재하지 않을때 기본 props를 설정한다.2-1. 코드먼저 MyProps.js를 보자.import React from 'react';function MyProps({name, color}) { return ( 안녕하세요 {name} );}// defaultProps 설정 (아무 props를 입력하지 않을때 기본으로 설정되는 props)MyProps.defaultProps = { name: "이름없음"}export default MyProps;Hello.defaultProps 구문을 보면, MyProps 컴포넌..
1. 개요props는 properties의 약자로 속성을 의미한다. HTML 태그 내에 보면 value, name, id 등.. 각각의 속성이 들어가 있는 걸 본적 있을 것이다. 이를 props라고 하며, 각 컴포넌트에 props를 전달할 수도 있다. 2. 코드먼저 MyProps.js를 보자.import React from 'react';function MyProps(props){ const style = { color : props.color } return ( 안녕하세요. {props.name} 색상은 {props.color} 입니다. );}export default MyProps;MyProps 함수를 보면 파라미터로 props를 받고 있..
1. 개요JSX는 자바스크립트를 확장한 문법이다. JSX를 사용하지 않는 리액트 문법은 HTML과 매우 흡사하다. 그래서 JSX를 사용하면 개발자 입장에서는 매우 편하게 리액트를 개발할 수 있다. 2. 코드비교JSX를 사용하지 않은 코드와 사용한 코드를 비교해보자.// JSX 적용 전 // JSX 적용 후 코드를 비교해보면 알 수 있듯, JSX를 사용하면, 자바스크립트 언어에서 HTML 태그를 작성하듯이 페이지를 만들 수 있다. 이렇게 되면 개발자들은 HTML 만들듯이 자바스크립트의 기능도 구현할 수 있는 것이다. 여기서 주의할 점은 자신이 만든 컴포넌트는 무조건 대문자로 시작해야한다. 3. babel위 JSX 적용 코드를 자세히 보면 babel이라는 단어가 보일 것이다. 이는 JSX 문법을..
![]()
1. 서론최근 이직한 회사에서 스프링부트 뿐만아니라 리액트를 사용해야할 수도 있다고해서 리액트를 간단히 공부하고 있다. 리액트를 접하면서 처음 맞아본 에러(시작하자마자 에러남 ㅋㅋ)를 소개하고 해결한 방법을 포스팅하려한다. 2. 에러발생리액트를 사용하기 위해 노드js (Node.js) LTS 버전을 설치하고, 리액트를 프로젝트 폴더에 주입하기 위해 npx 명령어를 사용했을때, npx create-react-app 프로젝트명npx : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npx.ps1 파일을 로드할 수 없습니다.자세한 내용은 ...에러가 났다. 권한 문제일 수 있다고하여 권한을 수정해보려 했으나, 회사 PC라 조심스럽기도 하고.. 권한을 바꾸지 않아도 해..
