react

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. 개요지난 포스팅에 언급했듯. 다른 컴포넌트를 담는 div 컴포넌트는 어떻게 구현하는지 포스팅해보겠다.  2. 코드지난 포스팅에선 const Container = React.createElement("div", null, [title, btn]);이런식으로 컴포넌트들을 배열로 가져와서 랜더링 했지만 JSX에서는 개발자가 정의한 컴포넌트를 태그로 불러올 수 있다.  이렇게 개발자가 정의한 컴포넌트를 '', ''로 가져올 수 있다. 여기서 페이지를 열어보면?이렇게 에러가 쫘르륵 나오게되며, 당연히 페이지에는 나와야할 텍스트와 버튼이 나오지 않는다. 에러가 발생한 이유가 무엇일까? 2-1 Arrow Function자바스크립트에는 애로우 함수 (Arrow Function)라는 개념이 있는데, 이..

1. 개요JSX는 자바스크립트를 확장한 문법이다. JSX를 사용하지 않는 리액트 문법은 HTML과 매우 흡사하다. 그래서 JSX를 사용하면 개발자 입장에서는 매우 편하게 리액트를 개발할 수 있다. 2. 코드비교JSX를 사용하지 않은 코드와 사용한 코드를 비교해보자.// JSX 적용 전 // JSX 적용 후 코드를 비교해보면 알 수 있듯, JSX를 사용하면, 자바스크립트 언어에서 HTML 태그를 작성하듯이 페이지를 만들 수 있다. 이렇게 되면 개발자들은 HTML 만들듯이 자바스크립트의 기능도 구현할 수 있는 것이다. 여기서 주의할 점은 자신이 만든 컴포넌트는 무조건 대문자로 시작해야한다.  3. babel위 JSX 적용 코드를 자세히 보면 babel이라는 단어가 보일 것이다. 이는 JSX 문법을..