-
React 기초 공부하기(1)FrontEnd/React 2021. 11. 22. 13:55반응형
공부하기 앞서 React가 어떤 프레임워크인지 모르는 분들은 참고하시면 됩니다.
https://iwannafullstack.tistory.com/6
React란?
리액트(React, React.js, ReactJS)는 자바스크립트 라이브러리의 하나로서 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였다. PHP용 HTML 컴포넌트 프레임워크인 XHP에 영향을 받았다. 2011년 페이
iwannafullstack.tistory.com
React Demo Project
https://github.com/ruanyf/react-demos
GitHub - ruanyf/react-demos: a collection of simple demos of React.js
a collection of simple demos of React.js. Contribute to ruanyf/react-demos development by creating an account on GitHub.
github.com
React의 기초를 단계별로 잘 정리한 Demo Project 입니다.
데모 프로젝트를 바탕으로 기본적인 내용을 정리 해보겠습니다. 자세한 코드는 위의 코드를 참고하시면 됩니다.
Demo01 : Render JSX
<body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body>React의 템플릿 구문을 JSX라고 합니다. JSX에서는 HTML 태그를 JavaScript 코드에 직접 넣을 수 있습니다. ReactDOM.render()는 JSX를 HTML로 변환하고 지정된 DOM 노드로 렌더링하는 메소드입니다.
실행결과
Demo02 : Use JavaScript in JSX
var names = ['Alice', 'Emily', 'Kate']; ReactDOM.render( <div> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>, document.getElementById('example') );JSX에서 JavaScript를 사용할 수도 있습니다. HTML 구문의 시작으로 꺾쇠 괄호( < )를 사용하고
JavaScript 구문의 시작으로 중괄호( { )를 사용합니다.
실행결과
Dem03 : Use array in JSX
var arr = [ <h1>Hello world!</h1>, <h2>React is awesome</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') );JavaScript 변수가 배열인 경우 JSX는 암시적으로 배열의 모든 구성원을 연결합니다.
실행결과
Dem04 : Use array in JSX
class HelloMessage extends React.Component { render() { return <h1>Hello {this.props.name}</h1>; } } ReactDOM.render( <HelloMessage name="John" />, document.getElementById('example') );Class에는 속성이 있으며 this.props.[속성]을 사용하여 HelloMessage name='John'의 this.props.name이 /인 것처럼 구성 요소에 액세스할 수 있습니다.
Class 이름의 첫 글자는 대문자여야 한다는 점을 기억하세요. 그렇지 않으면 React에서 오류가 발생합니다. 예를 들어 컴포넌트의 이름으로 HelloMessage는 괜찮지만 helloMessage는 허용되지 않습니다. 그리고 React 컴포넌트에는 최상위 자식 노드가 하나만 있어야 합니다.실행결과
Dem05 : this.props.children
class NotesList extends React.Component { render() { return ( <ol> { React.Children.map(this.props.children, function (child) { return <li>{child}</li>; }) } </ol> ); } } ReactDOM.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.getElementById('example') );React는 컴포넌트의 자식 노드에 접근하기 위해 this.props.children을 사용합니다.
this.props.children의 값에는 세 가지 가능성이 있습니다.
1. 구성 요소에 자식 노드가 없으면 값이 정의되지 않습니다.
2. 단일 자식 노드인 경우 개체입니다.
3. 자식 노드가 여러 개인 경우 배열입니다.
React는 this.props.children의 불투명한 데이터 구조를 처리하기 위해 React.Children 유틸리티를 제공했습니다. React.Children.map은 데이터 유형이 정의 되지 않으면 객체가 생성 되지 않고 반복할 수 있습니다.실행결과
Dem06 : PropTypes
class MyTitle extends React.Component { static propTypes = { title: PropTypes.string.isRequired, } render() { return <h1> {this.props.title} </h1>; } }컴포넌트에는 React에서 props라고 하는 많은 특정 속성이 있으며 모든 유형이 될 수 있습니다.
props를 검증하는 방법이 필요합니다. 사용자가 구성 요소에 아무 것도 입력할 수 있는 자유를 원하지 않습니다.
이를 PropTypes라고 합니다. 위의 코드에서 PropTypes는 제목이 필수이고 값이 문자열이어야 한다고 React에 알려줍니다.실행결과
Dem07 : 업데이트 중
반응형