-
[스파르타코딩클럽] 리액트 React.js week 1-3SPARTA CODING CLUB 2021. 8. 9. 15:50
JSX
리액트에서는 딱 하나의 html 파일만 존재합니다. (public 폴더 아래에 있는 index.html)
그럼 리액트에서 어떻게 뷰를 그릴까요?
- JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그립니다.
HTML을 품은 JS === JSX!
자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 할 수 있어요.
JSX 규칙
- 태그는 꼭 닫아주기
// input 태그를 닫지 않고 넣어볼거예요! function App() { return ( <div className="App"> <input type='text'> <!-- 에러! --> <!-- <input type='text' /> 이렇게!--> </div> ); }
- 무조건 1개의 엘리먼트를 반환하기
return ( <p>안녕하세요! 리액트 반입니다 :)</p> // 에러! <div className="App"> <!-- <p>안녕하세요! 리액트 반입니다 :)</p> 여기로! --> <input type='text'/> </div> );
- JSX에서 javascript 값을 가져오려면 중괄호를 사용
값을 가져올 때 뿐만 아니라, map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용할 수 있습니다.const cat_name = 'perl'; // return 부분만 복사해서 붙여넣고 크롬 브라우저로 돌아가 새로고침 해봅시다. return ( <div> hello {cat_name}! </div> );
<p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p> - class 대신 className (id는 id ;)
- 인라인 스타일 문법
// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까요! // 이렇게 쓰거나, <p style={{color: 'orange', fontSize: '20px'}}>orange</p> //혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요! function App() { const styles = { color: 'orange', fontSize: '20px' }; return ( <div className="App"> <p style={styles}>orange</p> </div> ); }
Component
리액트 = 레고, 컴포넌트 = 블록
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <header> ... </header> <div class="container"> <div id="image-banner"> ... </div> <div id="contents-1"> ... </div> </div> <footer> ... </footer> </body> </html>
나누면,
- <header/> 컴포넌트
- <container/> 컴포넌트
- <imagebanner/> 컴포넌트
- <contents1/> 컴포넌트
- <footer/> 컴포넌트
함수형
// 리액트 패키지를 불러옵니다. import React from 'react'; // 함수형 컴포넌트는 이렇게 쓸 수도 있고 // function Bucketlist(props){ // return ( // <div>버킷 리스트</div> // ); // } // 이렇게 쓸 수도 있어요. =>가 들어간 함수를 화살표 함수라고 불러요. // 저희는 앞으로 화살표 함수를 사용할거예요. // 앗 () 안에 props! 부모 컴포넌트에게 받아온 데이터입니다. // js 함수가 값을 받아오는 것과 똑같이 받아오네요. const BucketList = (props) => { // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다. return ( <div> 버킷 리스트 </div> ); } // 우리가 만든 함수형 컴포넌트를 export 해줍니다. // export 해주면 다른 컴포넌트에서 BucketList 컴포넌트를 불러다 쓸 수 있어요. export default BucketList;
클래스형
import React from 'react'; import logo from './logo.svg'; import './App.css'; // BucketList 컴포넌트를 import 해옵니다. // import [컴포넌트 명] from [컴포넌트가 있는 파일경로]; import BucketList from './BucketList'; // 클래스형 컴포넌트는 이렇게 생겼습니다! class App extends React.Component { constructor(props){ super(props); // App 컴포넌트의 state를 정의해줍니다. this.state = { list: ['영화관 가기', '매일 책읽기', '수영 배우기'], }; } // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다! render() { return ( <div className="App"> <h1>내 버킷리스트</h1> {/* 컴포넌트를 넣어줍니다. */} <BucketList/> </div> ); } } export default App;
데이터를 넘겨줄 때
State와 Props
State
- state는 Component가 가지고 있는 데이터입니다.
- state는 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터입니다.
- 생성도 수정도 오직 해당 컴포넌트 내에서만 이뤄집니다. 내꺼니까 생성도 수정도 자유롭습니다.
- 함수형 컴포넌트에는 state가 없습니다.
Props
- props는 Component가 부모 Component로부터 받아온 데이터입니다.
- Props로 받은 데이터는 수정할 수 없습니다! 남의 것이니까요!
- 데이터를 넘겨줄 때!
- state 값 사용하기
render() { console.log(this.state); ... }
- 컴포넌트에 props를 넘겨줄 때
// App.js render() { // this 키워드를 통해 state에 접근할 수 있어요. console.log(this.state); return ( <div className="App"> <h1>내 버킷리스트</h1> {/* 컴포넌트를 넣어줍니다. */} {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */} <BucketList list={this.state.list}/> //이렇게 </div> ); } // Other.js const BucketList = (props) => { console.log(props); // 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다. return ( <div> 버킷 리스트 </div> ); }
- state 값 사용하기
리액트 기본 뼈대에 대해!
기본적인 데이터를 생성하고 넘겨주는 것을 배워보았습니다.
연습만이 살길...;
반응형'SPARTA CODING CLUB' 카테고리의 다른 글
[스파르타코딩클럽] 리액트 React.js week 1-2 (0) 2021.08.04 [스파르타코딩클럽] 리액트 React.js week 1-1 (0) 2021.08.03