코딩애플_JSX,states, 버튼시 횟수 증가
2장. JSX
리액트 에서는 JSX 라는 문법을 쓴다.
2.1 className
- 자바스크립트의 class 대신 className 이라고 쓴다.
2.2 데이터 바인딩이 쉽다.
- 중괄호 { } 를 쓴다.
{변수명}, {함수명()},
<img src={logo} /> // 주소를 쏼라쏼라 쓰는 것보다는 해당 형식으로 많이 쓴다.
- 엘리먼트(태그)내에 style 을 집어 넣을수 있다.
but, 복잡하고 보기 안 좋아서 CSS 파일에 class를 만들어 쓴다.
{변수명}, {함수명()},
<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>
// font-size : 속성명에 - 기호를 쓸수 없다. CamelCase 적용한다.
3장. state
3.1 state란?
-
변수 대신 쓰는 데이터 저장 공간
-
유동적으로 변할거 같은 데이터는 stats 저장공간에 담는다.
3.2 쓰는 방법
import React, { useState } from 'react';
// {useState} 를 추가한다. useState라는 함수를 쓰기 위하여.
function App(){
let [글제목, 글제목변경함수] = useState('남자 코트 추천');
// useState('(추후 변경가능한) 데이터')
// useState 함수 의 결과물은 배열 [a,b] 의 형태가 된다.
// 데이터는 객체, 배열 등 아무거나 가능
// 글제목변경함수는 나중에......
return (
<div className="App">
<div className="black-nav">
<div>개발 blog</div>
</div>
<div className="list">
<h3>{ 글제목 }</h3>
<p>2월 17일 발행</p>
<hr/>
</div>
</div>
)
}
3.3 ES6, destructuring 문법
var [a,b] = [10,100];
var a = 10;
var b = 100;
변수 대신 쓰는 데이터 저장 공간
유동적으로 변할거 같은 데이터는 stats 저장공간에 담는다.
import React, { useState } from 'react';
// {useState} 를 추가한다. useState라는 함수를 쓰기 위하여.
function App(){
let [글제목, 글제목변경함수] = useState('남자 코트 추천');
// useState('(추후 변경가능한) 데이터')
// useState 함수 의 결과물은 배열 [a,b] 의 형태가 된다.
// 데이터는 객체, 배열 등 아무거나 가능
// 글제목변경함수는 나중에......
return (
<div className="App">
<div className="black-nav">
<div>개발 blog</div>
</div>
<div className="list">
<h3>{ 글제목 }</h3>
<p>2월 17일 발행</p>
<hr/>
</div>
</div>
)
}
var [a,b] = [10,100];
var a = 10;
var b = 100;
let 으로 선언하면 안된다...왜지???
3.4 state 쓰는 이유
- 변수가 변경될 때 자동으로 관련된 HTML을 재렌더링되게 만든다.
3.5 좋아요 버튼 만들고 누를때마다 횟수 증가
import React, {useState} from 'react';
import './App.css';
function App() {
let [title, titleFunction] = useState(['React','HTML','CSS'])
let [count, countFuction] = useState(0)
return (
<div className="App">
<div className="black-nav">
<div>개발 블로그</div>
</div>
<div className='list'>글제목
<h3>{title[0]} <span onClick = {()=>{countFuction(count+1)}}> 😁 </span> {count} </h3>
<p>2월 17일 발행</p>
<button>change</button>
<hr/>
</div>
<div className='list'>글제목
<h3>{title[1]}</h3>
<p>2월 17일 발행</p>
<hr/>
</div>
<div className='list'>글제목
<h3>{title[2]}</h3>
<p>2월 17일 발행</p>
<hr/>
</div>
</div>
);
}
export default App;
풀이
let [count, countFuction] = useState(0)
-
count 라는 stste 변수를 만들었고 초기값으로 0을 주었다.
-
count 를 변경시키기 위하여 함수 countFunction 이라는 함수 명을 만들었다.
-
count 값을 변경시킬때는 countFunction(변경하고자하는값) 을 사용하여야 한다.( 완전히 대체해준다!!!)
return (
<div className="App">
<div className="black-nav">
<div>개발 블로그</div>
</div>
<div className='list'>글제목
<h3>{title[0]} <span onClick = {()=>{countFuction(count+1)}}> 😁 </span> {count} </h3>
<p>2월 17일 발행</p>
<button>change</button>
<hr/>
</div>
-
<span>
태그를 사용하여 좋아요 이모티콘을 만들었다. -
회수(count) 표현을 바로 뒤에 써주었다.
-
이모티콘을 클릭할 때 마다 이벤트를 발생시키기 위하여 onClick={실행 함수} 만들었다.
자바스크립트<div onclick="실행할 자바스크립트">
JSX<div onClick={실행할 함수}>
-
onClick{} 에 함수 틀을 넣어주고 onClick{( ) => { }}
<div onClick={ showModal }> (showModal은 어디 다른데 만들어둔 함수 이름)
<div onClick={ function(){ 실행할 코드 } }>
<div onClick={ () => { 실행할 코드 } }>
- onClick{( ) => {countFunction(count+1)}} 변경 하고자 하는 값을 넣어주었다.
count=count+1 식의 js 문법이 아니다!!
count의 states 함수인 countFunction 을 사용하여야 한다.
Author And Source
이 문제에 관하여(코딩애플_JSX,states, 버튼시 횟수 증가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bleach7/코딩애플리액트2장저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)