1. 조건문 쓰는 방법
JSX 에서 { } 안에 자바스크립트 코드를 쓸 수 있다. 하지만 if 문은 불가하다.
if 문 대신 삼항연산자를 JSX 안의 { } 내에서 쓰기 가능하다.
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<button onClick={제목바꾸기}>버튼</button>
<div className="list">
<h3>{ 글제목[0] } <span onClick={()=> {따봉변경(따봉 + 1)}}>👍</span> {따봉}</h3>
<p>11월 14일 발행</p>
<hr />
</div>
<div className="list">
<h3>{ 글제목[1] }</h3>
<p>11월 15일 발행</p>
<hr />
</div>
<div className="list">
<h3>{ 글제목[2] }</h3>
<p>11월 16일 발행</p>
<hr />
</div>
<Modal />
{ 1<3 ? // if 문 대신 삼항연산자를 써야 한다.
console.log('맞았다'):
console.log('틀렸다')
}
</div>
이렇게 작성하면 '맞았다' 가 출력된다.
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<button onClick={제목바꾸기}>버튼</button>
<div className="list">
<h3>{ 글제목[0] } <span onClick={()=> {따봉변경(따봉 + 1)}}>👍</span> {따봉}</h3>
<p>11월 14일 발행</p>
<hr />
</div>
<div className="list">
<h3>{ 글제목[1] }</h3>
<p>11월 15일 발행</p>
<hr />
</div>
<div className="list">
<h3>{ 글제목[2] }</h3>
<p>11월 16일 발행</p>
<hr />
</div>
<Modal /> // modal 창 1개
{ 1<3 ? // modal 창 2개
<Modal></Modal>:
null
}
</div>
);
이렇게 하니까 모달창이 두개가 뜬다.
리액트에서 UI 를 만들 때는 state 로 UI 보임/안보임 스위치를 넣는다.
function App() {
let [글제목, 글제목변경] = useState(['HTML 공부하기', 'CSS 공부하기', 'Javascript 공부하기']);
let [따봉, 따봉변경] = useState(0);
let [modal, modal변경] = useState(true); // 현재 modal 은 true 값을 가진다.
function 제목바꾸기(){
var newArray = [...글제목];
newArray[0] = '여자 코트 추천';
글제목변경(newArray);
}
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<button onClick={제목바꾸기}>버튼</button>
<div className="list">
<h3>{ 글제목[0] } <span onClick={()=> {따봉변경(따봉 + 1)}}>👍</span> {따봉}</h3>
<p>11월 14일 발행</p>
<hr />
</div>
<div className="list">
<h3>{ 글제목[1] }</h3>
<p>11월 15일 발행</p>
<hr />
</div>
<div className="list">
<h3>{ 글제목[2] }</h3>
<p>11월 16일 발행</p>
<hr />
</div>
<Modal />
{ modal===true ? //
<Modal></Modal>:
null
}
</div>
);
}
마찬가지로 모달창이 2개가 뜬다.
이번엔 h3 를 누르면 모달창이 보이게 할 것이다.
이때 처음 state 값은 false 로 한다.
function App() {
let [글제목, 글제목변경] = useState(['HTML 공부하기', 'CSS 공부하기', 'Javascript 공부하기']);
let [따봉, 따봉변경] = useState(0);
let [modal, modal변경] = useState(false); // modal 값은 false
function 제목바꾸기(){
var newArray = [...글제목];
newArray[0] = '여자 코트 추천';
글제목변경(newArray);
}
return (
<div className="App">
<div className="black-nav">
<div>개발 Blog</div>
</div>
<button onClick={제목바꾸기}>버튼</button>
<div className="list">
<h3>{ 글제목[0] } <span onClick={()=> {따봉변경(따봉 + 1)}}>👍</span> {따봉}</h3>
<p>11월 14일 발행</p>
<hr />
</div>
<div className="list">
<h3>{ 글제목[1] }</h3>
<p>11월 15일 발행</p>
<hr />
</div>
<div className="list">
<h3 onClick={()=>{modal변경(true)}}>{ 글제목[2] }</h3> // true 로 변경
<p>11월 16일 발행</p>
<hr />
</div>
<Modal /> // 모달창 1개
{ modal===true ? // 모달창 2개
<Modal></Modal>:
null
}
</div>
);
}
h3 에 onClick 을 쓰고 그 안에 화살표 함수를 작성한다.
그리고 setState 함수인 modal변경 함수를 통해서 state 값을 true 로 바꿔준다.
그 결과 modal === true 가 되서 모달창이 2개가 뜬다.
이것이 전형적인 react 에서 클릭시 등장하는 UI 를 만드는 방법이다. UI 가 보임/안보임 정보를 state 로 저장해둔다.
햄버거 메뉴 같은 것도 이런 원리라고 생각하면 된다!
숙제) 버튼을 누르면 모달창 열림, 한번 더 누르면 닫히게 만들기
내 코드
let [modal, modal변경] = useState(false);
return (
<button onClick={ ()=>{ modal===true? modal변경(false) : modal변경(true) }}>버튼</button>
{modal ===true ?
<Modal></Modal>:
null}
)
코딩애플님의 코드
function App (){
let [modal, modal변경] = useState(false);
return (
<div>
<button onClick={ ()=>{ modal변경(!modal) } }> 열고닫는버튼 </button>
{
modal === true
? <Modal />
: null
}
</div>
)
}
2. 반복문 쓰는 법
JSX 중괄호 내에 for 못 넣는다. (if 문과 마찬가지라고 생각하면 된다.)
반복문을 쓰고 싶다면은......
(중괄호는 항상 {변수명}, {함수명} 을 쓸 수 있다고 생각하면 된다.)
var 어레이 = [2, 3, 4];
var 뉴어레이 = 어레이.map(function(a){
return a * 2
});
array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 .map() 을 사용한다.
// 반복문 쓰는 법
{ 반복할 데이터.map ( function( ){
return <HTML>
} ) }
let [글제목, 글제목변경] = useState(['HTML 공부하기', 'CSS 공부하기', 'Javascript 공부하기']);
...
{
글제목.map(function(){ // 3번 반복한다는 뜻
return (
<div className="list">
<h3>{ 글제목[2] }</h3>
<p>11월 16일 발행</p>
<hr />
</div>
)
})
}
글제목의 갯수는 반복시킬 데이터 갯수와 같다. 위의 코드는 글제목 갯수가 3개이므로 3번 반복된다.
{
글제목.map(function(a){
return (
<div className="list">
<h3>{ a }</h3>
<p>11월 16일 발행</p>
<hr />
</div>
)
})
}
여기서 a 는 array 안에 있던 하나하나의 데이터를 의미한다. a 대신 글이라고 생각하면 쉽다
따라서 이거 하나만 쓰면 훨씬 더 간추려 지면서 똑같은 결과를 낼 수 있다.
{
글제목.map(function(글){
return (
<div className="list">
<h3>{ 글 } <span onClick={()=> {따봉변경(따봉 + 1)}}>👍</span> {따봉}</h3>
<p>11월 16일 발행</p>
<hr />
</div>
)
})
}
다음과 같이
이벤트를 반복할 수도 있다. 하지만 누를 때마다 다음과 같은 현상이 발생한다....
▼
위와 같이 누르면 따봉의 수가 같이 올라가는 현상이 발생한다.
따봉 누를 때 동시에 변경되는 이유는 따봉 state 는 한 개의 숫자인데 그걸 전부 공유하고 있기 때문이다.
(나중에 배워볼 것)
for 반복문을 쓰는 방법은 다음과 같다.
function 반복된UI(){
var 어레이 = [];
for(var i=0; i<3; i++){
어레이.push(<div>안녕</div>);
}
return 어레이
}
...
{반복된UI()} // 원하는 자리에 이렇게 쓰면 된다.
for 반복문을 쓰고 싶다면?
- 보통 함수 안에서 사용한다.
- array 에 HTML 추가하는 방식
function 이라는 절차가 하나 더 생겨서 약간 복잡해보이지만 이것도 많이 쓰이는 방식 중 하나이니 알아두자.
'💎 React' 카테고리의 다른 글
| 리액트 댓글 달기 (0) | 2021.11.24 |
|---|---|
| props 사용법 (0) | 2021.11.22 |
| state 와 props 개념 (0) | 2021.11.21 |
| 리액트 - SPA 개념과 Routing 하는 방법 (0) | 2021.11.16 |
| 리액트 개론 (0) | 2021.11.16 |