[React] chap.1
React 설치 및 개발환경 세팅
1. node.js 설치
2. 작업하려는 폴더에서 npx create-react-app 작업폴더명
3. npm start로 웹 미리보기 (작업폴더로 경로변경 후 시작)
JSX
function App(){
return (
<div className="App">
<div>개발 blog</div>
</div>
)
}.black-nav {
background : black;
width : 100%;
display : flex;
color : white;
padding : 20px;
font-weight : 600;
font-size : 20px;
}
- 여러가지 문법
function App() {
let posts = {color: 'blue', fontSize: '30px'};
function 함수(){
return 100
}
return (
<div className="App">
<div className="black-nav">
<div style={ {posts} }>개발 Blog</div>
</div>
<img src={ logo }/>
<h4>{ 함수() }</h4>
</div>
);
}class = className (class 예약어 때문에)
css style = object 형태로 카멜케이스(fontColor)
데이터 바인딩 = {} (함수도 가능)
State
변수 말고도 데이터바인딩과 관련된 중요한 데이터를 저장할 때 쓰는 것.
function App(){
let posts = '강남 고기 맛집';
return (
<div className="App">
<div className="black-nav">
<div>개발 blog</div>
</div>
<div className="list">
<h3>{ posts }</h3>
<p>2월 17일 발행</p>
<hr/>
</div>
</div>
)
}.list {
margin-top : 30px;
text-align : left;
padding-left : 20px;
padding-right : 20px;
}
- state 사용
import React, { useState } from 'react';
import './App.css'
function App(){
// destructuring 문법
let [글제목, 글제목변경] = useState('남자 코트 추천'); // [a, b] => [남자 코트 추천, 함수]
// let [글제목2, 글제목변경2] = useState(['남자 코트 추천2', '강남 우동 맛집']);
let posts = '강남 고기 맛집';
return (
<div className="App">
<div className="black-nav">
<div>개발 blog</div>
</div>
<div className="list">
<h3>{ 글제목 }</h3> <!-- 남자 코트 추천 -->
<p>2월 17일 발행</p>
<hr/>
</div>
</div>
)
}기존의 변수말고도 state로 데이터 바인딩이 가능하다. Array, Object 등 아무 자료형의 데이터도 넣을 수 있다.
* State를 쓰는 이유
변수가 변경될 때 자동으로 관련된 HTML을 재렌더링되게 만들려면 state에 저장해서 데이터 바인딩한다. 글 제목을 수정하거나 할때 새로고침 없이 웹페이지를 스무스하게 반영하고 싶으면 state를 사용한다. 리액트는 state가 수정되면 state가 포함된 HTML을 자동으로 재렌더링 해준다.
- JSX 기능 개발
<!-- HTML -->
<div onclick="실행할 자바스크립트">
<!-- JSX -->
<div onClick={실행할 함수}>
<!-- ex) -->
<div onClick={ showModal }> (showModal은 어디 다른데 만들어둔 함수 이름)
<div onClick={ function(){ 실행할 코드 } }>
<div onClick={ () => { 실행할 코드 } }>1. onClick (C가 대문자)
2. {} 중괄호를 사용한다.
3. 코드가 아니라 함수가 필요하다 (callback 함수 처럼 사용)
- state 변경 함수
let [ 따봉, 따봉변경 ] = useState(0); // 변수와 변수변경 함수
function App(){
let [ 따봉, 따봉변경 ] = useState(0);
return (
<HTML 많은 곳>
<!-- 콜백함수로 변경함수 사용 -->
<h3> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉 + 1) } } >👍</span> { 따봉 }</h3>
</HTML 많은 곳>
)
}1. JSX에서는 이벤트로 함수를 넣을 때 콜백 함수처럼 넣는다.
2. state는 값을 변경할 때 지정된 변경함수를 써야한다.
3. 변경함수는 데이터를 완전히 대체한다. ( 따봉 = 따봉 + 1 이런거 안됌)
function App() {
let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬독학']);
function 제목바꾸기(){
// 글제목[0] = '여자코트추천' => 이런거 안됌
var newArray = [...글제목];
newArray[0] = '여자 코트 추천';
글제목변경(newArray);
}
return (
<div className="App">
<button onClick={ 제목바꾸기 }>버튼</button>
<div className="list">
<h3>{ 글제목[0] } <span onClick={ () => {따봉변경(따봉 + 1)} }>👍</span>{ 따봉 }</h3>
<p>2월 17일 발행</p>
<hr/>
</div>
</div>
);
}1. onClick에는 함수만 들어갈 수 있으며 정의된 함수를 파라미터로 넣을땐 소괄호 {}는 넣지 않는다.
2. 제목 바꾸기라는 함수를 만들고 해당 로직을 입력하는데 state는 개별 조작할 수 없다.
3. 데이터를 바꾸기위해선 전체 state를 바꿔야하며 바꿀땐 state 변경함수를 쓴다.
4. 참조 타입의 자료형을 복사할 땐 꼭 원본은 놔두고 새로운 변수에 저장하며 [...xxx]식으로 딥 카피한다.
React Component
하나의 태그 그룹들을 하나의 태그로 만들고 싶을 때 사용한다.
<div className="modal">
<h2>제목</h2>
<p>날짜</p>
<p>상세내용</p>
</div>.modal{
margin-top : 20px;
padding : 20px;
background : #eee;
}
위의 모달창을 하나의 태그로 관리 할 수 있다.
function App (){
return (
<div>
HTML 잔뜩있는 곳
...
<Modal></Modal>
</div>
)
}
function Modal(){ // 대문자로 사용해야 함
return (
<div className="modal">
<h2>제목</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}**return안에 태그를 2개 사용할 수 없다. (하나의 태그로 감싸서 사용)
:특징
1. 이름을 지을땐 영어 대문자로 시작한다.
2. return안에 태그가 평행하게 여러개 들어갈 수 없다. (<> </>를 사용하면 되긴 함)
3. function App과 동일한 위치에 생성한다.
4. 컴포넌트 안에 다른 컴포넌트를 주입할 수도 있다.
function Modal(){
return (
<div className="modal">
<h2>제목</h2>
<p>날짜</p>
<p>상세내용</p>
<다른컴포넌트></다른컴포넌트>
</div>
)
}
function 다른컴포넌트(){
return ( <div> 안녕 </div> )
}
- Component 생성 관습
- 반복해서 출현하는 HTML 덩어리
- 내용이 자주 변경되는 HTML 부분
- 다른페이지에 들어갈 내용
- 협업할 때 ? 컴포넌트 단위
:단점
- 많으면 관리가 힘들다
- 다른 component 안에 있는 state를 사용할 때 바로 쓸 수 없다. (props 문법 사용해야함)
React에서 반복문 쓰기
* map
JSX에서는 중간중간에 중괄호 {} 안에 변수명을 넣을 수는 있으나, if나 for을 사용할 수 없다.
let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬독학']);
let [따봉, 따봉변경] = useState(0);
function App (){
return (
<div>
HTML 잔뜩있는 곳
...
{ 글제목.map(function(글, i){
return <div className="list" key={i}>
<h3 onClick={ ()=>{ 따봉변경(따봉+1) } }>{ 글 }</h3>
<p>2월 17일 발행</p>
<hr/>
</div>; <!-- ''가 없어도 알아서 리액트는 렌더링해줌 -->
}) }
</div>
)
}** 반복문 사용시 key를 정해줘야한다. key는 1,2,3,4.... 등의 순차적으로 올라가는 인덱스 같은것을 지정한다.
- 일반 for 반복문
function App (){
function 반복된UI(){
var 어레이 = [];
for (var i = 0; i < 3; i++) {
어레이.push(<div>안녕</div>) // ''없어도 리액트가 알아서 잘 렌더링 해줌
}
return 어레이
}
return (
<div>
HTML 잔뜩있는 곳
{ 반복된UI() }
</div>
)
}1. 일반함수를 만들고 HTML을 담을 array 자료를 생성한다.
2. 함수 안에서 for반복문을 이용해 array에 HTML을 추가하고 완성된 array를 return 한다.
3. 원하는 곳에 { 함수() }식으로 데이터바인딩 한다.
props
자식 컴포넌트(Modal)가 부모 컴포넌트(App)의 state를 갖다 쓰고 싶을 때 사용한다.
function App (){
let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
return (
<div>
...
<Modal 글제목={글제목}></Modal> <!-- 자식컴포넌트 전송할이름={state명} -->
</div>
)
}
function Modal(props){ // 전달받을 state를 받는 파라미터
return (
<div className="modal">
<h2>제목 { props.글제목[0] }</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}1. props는 <Modal 이런거={이런거} 저런거={저런거}> 방식으로 여러개 전달 가능
2. props를 전송할때 형식은 여러개이다. <Modal 글제목={변수명}> 변수 전달은 중괄호 {}, <Modal 글제목="강남우동맛집"> 텍스트 전달은 따옴표도 가능하다.
input
function App (){
let [입력값, 입력값변경] = useState('');
return (
<div>
HTML 잔뜩있는 곳...
<input onChange={ (e) => { 입력값변경(e.target.value) } }/>
{입력값}
</div>
)
}input에 입력한 데이터는 중요한 데이터이기 때문에 state에 저장하여 사용하는게 일반적이다. 리액트에서는 자바스크립트와 다르게 input 이벤트리스너의 onChange와 onInput이 같게 작용한다. (input처럼) 때문에 둘중 하나를 사용하면되고, 이벤트리스너처럼 함수의 e.target등을 사용할 수 있다.
class
function App(){
return (
<div>
HTML 잔뜩있는 곳
<Profile />
</div>
)
}
class Profile extends React.Component { // 리액트 내장 클래스 상속
constructor(){
super(); // 상속 받은것 사용하기 위함
this.state = { name: 'Kim', age: 30}
}
changeName = function() { // this 속성에따라 arrow나 function 사용
this.setState( {name: 'Park'} )
}
render(){
return (
<div>
<h3>프로필입니다</h3>
<p>저는 { this.state.name }입니다.</p>
<button onClick={ this.changeName.bind(this) }>버튼</button> <!-- this에 따라 바뀜 -->
</div>
)
}
}state를 변경할 때, this.setState()라는 내장함수를 꼭 사용해야 한다. 신 문법에서 쓰는 useState와 다른점은 useState는 변경 시 아예 state 자체를 바꾸는건데 예전 문법의 setState()는 필요한 부분만 수정한다.
onClick에 들어가는 로직이 길어져서 따로 함수로 빼서 쓰면 에러가 난다.
this.setState()라는 코드의 this가 함수(function)안에서 쓰면 값이 새롭게 재정의 되기때문에 arrow function()을 사용하거나 this.changeName.bind(this) 이런 식으로 사용해야 한다.
'React' 카테고리의 다른 글
| [React] chap.3 (0) | 2021.12.14 |
|---|---|
| [React] chap.2 (0) | 2021.12.07 |