<< 학습 목표 >>
1. useState 훅이 필요한 상황을 판단할 수 있다.
2. 조건부 렌더링을 구현할 수 있다.
이번에는 전 글 ( https://codingaja.tistory.com/78 ) 에서 배운 useState 훅을 좀 더 익혀보자
프로젝트 -> src -> chapter03 -> Component7.jsx 파일을 추가하고 아래 이미지를 참고해
1. 메세지를 입력한 후 [ 입력한 메세지 출력 ] 버튼을 클릭하면 수평선 위에 입력한 메세지를 출력할 것
2. [ 초기화 ] 버튼을 클릭하면 수평선 위에 출력된 메세지, input 태그 안에 입력한 메세지가 사라질 것
을 구현해보자
시간이 오래걸리더라도 힌트를 보지 않고 직접 구현하는게 본인의 실력을 키우고 리엑트를 학습할 수 있는 방법이니 최소 10분은 직접 고민한 후 힌트를 보자
만약 힌트를 본다면 각 힌트 내 코드를 단순히 따라 입력하지 말자
따라 입력하는건 타자연습임
타자연습을 하기 위해 시간들여 이 글을 읽는 분은 없을 것
각 힌트를 보고 이해 한 후 입력 하자
<< 1단계 힌트 >>
import React from 'react';
function Component7() {
return(
<div>
<p></p>
<hr />
<input type="text" id="message" placeholder="메세지 입력" />
<button type="button">입력한 메세지 출력</button>
<button type="button">초기화</button>
</div>
);
}
export default Component7;<< 2단계 힌트 >>
import React from 'react';
function Component7() {
return(
<div>
<p></p>
<hr />
<input type="text" id="message" placeholder="메세지 입력" />
<button type="button" onClick={clickBtn}>입력한 메세지 출력</button>
<button type="button" onClick={clearMessage}>초기화</button>
</div>
);
}
export default Component7;<< 3단계 힌트 >>
import React, {useState} from 'react';
function Component7() {
const [message, setMessage] = useState(null);
let clickBtn = () => {
};
let clearMessage = () => {
};
return(
<div>
<p>{message}</p>
<hr />
<input type="text" id="message" placeholder="메세지 입력" />
<button type="button" onClick={clickBtn}>입력한 메세지 출력</button>
<button type="button" onClick={clearMessage}>초기화</button>
</div>
);
}
export default Component7;<< 4단계 힌트 >>
import React, {useState} from 'react';
function Component7() {
const [message, setMessage] = useState(null);
let clickBtn = () => {
let messageTag = document.getElementById("message");
setMessage(messageTag.value);
};
let clearMessage = () => {
};
return(
<div>
<p>{message}</p>
<hr />
<input type="text" id="message" placeholder="메세지 입력" />
<button type="button" onClick={clickBtn}>입력한 메세지 출력</button>
<button type="button" onClick={clearMessage}>초기화</button>
</div>
);
}
export default Component7;<< 최종(5단계) 힌트 >>
import React, {useState} from 'react';
function Component7() {
const [message, setMessage] = useState(null);
let clickBtn = () => {
let messageTag = document.getElementById("message");
setMessage(messageTag.value);
};
let clearMessage = () => {
let messageTag = document.getElementById("message");
messageTag.value = "";
setMessage("");
};
return(
<div>
<p>{message}</p>
<hr />
<input type="text" id="message" placeholder="메세지 입력" />
<button type="button" onClick={clickBtn}>입력한 메세지 출력</button>
<button type="button" onClick={clearMessage}>초기화</button>
</div>
);
}
export default Component7;
<< 코드 설명 >>
(1). 위에서는 useState 훅을 따로 import 했지만 React, useState 모두 react 에서 import 해오므로 이와 같이 합칠 수 있음
(2). 화면에 입력한 메세지를 저장하고 출력하기 위해 useState 훅을 사용해 message 변수 선언
(3). [ 입력한 메세지 출력 ] 버튼을 클릭 했을 때 호출되는 함수로
아이디가 message인 input 태그를 불러와 사용자가 입력한 값을 message 변수에 저장
(4). [ 초기화 ] 버튼을 버튼을 클릭 했을 때 호출되는 함수로
아이디가 message인 input 태그를 불러와 사용자가 입력한 값을 지움
message 변수에 저장된 값을 지움
(5). message 변수에 저장된 값을 화면에 출력
프로젝트 -> src -> chapter03 -> Component8.jsx 파일을 추가하고 아래 이미지를 참고해
1. 메세지를 입력하면 동시에 수평선 위에 입력한 메세지가 출력되도록 할 것
2. [ 초기화 ] 버튼을 클릭하면 수평선 위에 출력된 메세지, input 태그 안에 입력한 메세지가 사라질 것
을 구현해보자
<< 1단계 힌트 >>
import React from 'react';
function Component8() {
return(
<div>
<p></p>
<hr />
<input type="text" id="message" placeholder="메세지 입력" />
<button type="button">초기화</button>
</div>
);
}
export default Component8;<< 2단계 힌트 >>
import React from 'react';
function Component8() {
return(
<div>
<p></p>
<hr />
<input type="text" id="message" placeholder="메세지 입력" onChange={changeMessage} />
<button type="button" onClick={clearMessage}>초기화</button>
</div>
);
}
export default Component8;<< 3단계 힌트 >>
import React, {useState} from 'react';
function Component8() {
const [message, setMessage] = useState(null);
let changeMessage = (event) => {
}
let clearMessage = () => {
};
return(
<div>
<p></p>
<hr />
<input type="text" id="message" placeholder="메세지 입력" onChange={changeMessage} />
<button type="button" onClick={clearMessage}>초기화</button>
</div>
);
}
export default Component8;<< 4단계 힌트 >>
import React, {useState} from 'react';
function Component8() {
const [message, setMessage] = useState(null);
let changeMessage = (event) => {
}
let clearMessage = () => {
let messageTag = document.getElementById("message");
messageTag.value = "";
setMessage("");
};
return(
<div>
<p></p>
<hr />
<input type="text" id="message" placeholder="메세지 입력" onChange={changeMessage} />
<button type="button" onClick={clearMessage}>초기화</button>
</div>
);
}
export default Component8;<< 최종(5단계) 힌트 >>
import React, {useState} from 'react';
function Component8() {
const [message, setMessage] = useState(null);
let changeMessage = (event) => {
setMessage(event.target.value);
}
let clearMessage = () => {
let messageTag = document.getElementById("message");
messageTag.value = "";
setMessage("");
};
return(
<div>
<p>{message}</p>
<hr />
<input type="text" id="message" placeholder="메세지 입력" onChange={changeMessage} />
<button type="button" onClick={clearMessage}>초기화</button>
</div>
);
}
export default Component8;<< 코드 설명 >>
(1). input 태그에 값을 입력할 때 마다 changeMessage 함수 호출
(2). 함수가 호출될 때 setter 를 사용해 입력한 값을 message 변수에 저장
(3). message 변수에 저장된 값 출력
전 글 ( https://codingaja.tistory.com/77 ) 에서 마지막으로 만들었던 Component5 컴포넌트 코드를 useState 훅을 사용해 변경하자
Component5 컴포넌트의 어디에 useState 훅을 사용해야할까?
import React from 'react';
function Component5() {
let changeUrl = (event) => {
changeATag(event.target.value);
};
let changeATag = (url) => {
let aTag = document.getElementById("anchor");
aTag.setAttribute("href", url);
aTag.textContent = url + " 으로 이동~!";
}
return(
<div>
<input type="url" placeholder="이동하고 싶은 URL을 입력하세요." onChange={changeUrl} />
<br />
<a href="#" id="anchor"></a>
</div>
);
}
export default Component5;
반드시 아래 코드를 보기 전에 직접 해결해볼 것
만약 어디에 어떻게 적용해야할 지 모르겠다면 전 글을 보고 useState 훅 기초를 다시 다지고 오자
<< useState 훅을 사용한 Component5 컴포넌트 >>
import React, {useState} from 'react';
function Component5() {
const [url, setUrl] = useState(null);
let changeUrl = (event) => {
setUrl(event.target.value);
};
return(
<div>
<input type="url" placeholder="이동하고 싶은 URL을 입력하세요." onChange={changeUrl} />
<br />
<a href={url} id="anchor">{url} 로 이동~!</a>
</div>
);
}
export default Component5;
<< 코드 설명 >>
useState 훅을 사용하지 않은 컴포넌트와 useState 훅을 사용한 컴포넌트를 비교해보면 useState 훅의 용도를 다시 상기할 수 있을 것
전 글에서 useState 훅은 화면에 출력할 값을 등록하고 변화시키는 훅이라고 했음
input 태그에 url을 입력할 때마다 a 태그의 href 속성과 text가 변해야하므로 이를 위해 useState 훅을 사용하고 변한 url을 출력하는 것
이번에는 select 태그로 선택한 값을 화면에 출력해보자
프로젝트 -> src -> chapter03 -> Component9.jsx 파일을 추가하고 아래 이미지를 참고해
1. 지역을 선택하면 선택한 지역명을 출력되도록 할 것
을 해보자
도시는 서울특별시, 인천광역시, 경기도, 구는 북구, 남구, 서구, 동구 로 통일해서 만들자
<< 컴포넌트 코드 >>
import React, { useState } from 'react';
function Component9() {
const [region, setRegion] = useState(null);
const [city, setCity] = useState(null);
let changeRegion = (event) => {
setRegion(event.target.value);
}
let changeCity = (event) => {
setCity(event.target.value);
}
return(
<div>
<p>{region} {city} 에 사시는군요~!</p>
<select name="region" id="region" onChange={changeRegion}>
<option value="">사는 도시를 선택하세요.</option>
<option value="서울특별시">서울특별시</option>
<option value="인천광역시">인천광역시</option>
<option value="경기도">경기도</option>
</select>
<select name="city" id="city" onChange={changeCity}>
<option value="">사는 구를 선택하세요.</option>
<option value="북구">북구</option>
<option value="남구">남구</option>
<option value="서구">서구</option>
<option value="동구">동구</option>
</select>
</div>
);
}
export default Component9;
useState는 컴포넌트 안에서 필요에 따라 여러번 사용할 수 있음
이쯤 되면 이런 코드는 간단한 코드일테니 별도의 설명은 없음
이번에는 문제가 아닌 같이 알아보자
다음과 같이 성별을 선택하고 출력하는 페이지를 보자
프로젝트 -> src -> chapter03 -> Component10.jsx 파일을 추가하고 아래 코드를 추가하자
import React, { useState } from 'react';
function Component10() {
const [gender, setGender] = useState(null);
let selectedGender = (event) => {
setGender(event.target.value);
}
return(
<div>
<p>성별 :
<input type="radio" value="남성" name="gender" onChange={selectedGender} />남성
<input type="radio" value="여성" name="gender" onChange={selectedGender} />여성
</p>
<hr />
<p>{gender} 이시군요~!</p>
</div>
);
}
export default Component10;
지금까지 봐온 코드와 다를바 없기 때문에 이제는 아주 쉬운 코드가 됐을 것
이 컴포넌트를 웹 페이지에 출력해 확인해보자
이 페이지에서 보기 안좋은 부분이 있는데
페이지에 막 들어왔을 때는
아직 성별을 선택하기 전이므로 "이시군요~!" 만 출력됨
성별을 선택하기 전이라면 아무것도 출력되지 않고 성별을 선택했을 때에만 "남성 이시군요~!" 또는 "여성 이시군요~!" 가 출력되도록 변경해보자
Component10 컴포넌트의 p 태그 부분을 변경 후 로 바꾸면 됨
변경 후의 p 태그를 출력하는 코드 부분을 조건부 렌더링이라고 부름
조건부 렌더링을 할 때 if 조건부 렌더링이 있고 if ~ else 조건부 렌더링이 있음
우리가 지금 사용한 조건부 렌더링은 if 조건부 렌더링임
if 조건부 렌더링의 형식 -> 조건식 && 태그
if문은 조건식이 참이면 if문 안에 있는 코드가 실행되고 조건식이 거짓이면 if문 안에 있는 코드가 실행되지 않음
if 조건부 렌더링도 이와 같이 동작함
if 조건부 렌더링의 조건식이 참이면 태그를 출력(Rendering/렌더링)하고 조건식이 거짓이면 태그를 출력하지 않는 것
useState 훅을 사용해서 gender 변수를 선언하고 gender 변수를 null 로 만들었음(1)
페이지에 막 들어왔을 때 조건부 렌더링(2)이 동작하는데 조건식이 false, 거짓,이므로(3) 태그가 출력되지 않음
성별을 선택하면 gender 변수의 값이 바뀌면서 다시 조건부 렌더링이 동작하고 조건식이 true, 참,이므로 태그가 출력되면서 "(성별) 이시군요~!" 가 출력됨
Component10 컴포넌트를 웹 페이지에 출력해 결과를 확인해보자
이번에는 if ~ else 조건부 렌더링을 알아보자
if ~ else 조건부 렌더링의 형식 -> 조건식 ? 태그 A : 태그 B
if ~ else문은 조건식이 참이면 if문의 코드가 실행되고 조건식이 거짓이면 else문의 코드가 실행됨
if ~ else 조건부 렌더링도 이와 같음
if ~ else 조건부 렌더링의 조건식이 참이면 태그 A를 출력하고 조건식이 거짓이면 태그 B를 출력하는 것
if ~ else 조건부 렌더링을 사용해보자
Component10.jsx 파일을 복사 붙여넣기 하고 이름을 Component11.jsx 로 바꾸자
그리고 Component11.jsx 파일 내 컴포넌트명을 Conponent11 로 바꾸자
그 후 if 조건부 렌더링 부분을 아래와 같이 바꾸자
import React, { useState } from 'react';
function Component11() {
const [gender, setGender] = useState(null);
let selectedGender = (event) => {
setGender(event.target.value);
}
return(
<div>
<p>성별 :
<input type="radio" value="남성" name="gender" onChange={selectedGender} />남성
<input type="radio" value="여성" name="gender" onChange={selectedGender} />여성
</p>
<hr />
{ gender == null ? <p>성별을 선택하세요~!</p> : <p> {gender} 이시군요~!</p> }
</div>
);
}
export default Component11;
페이지에 막 들어왔을 때는 if ~ else 조건부 렌더링의 조건식이 참이므로 "성별을 선택하세요~!" 가 출력됨
성별을 선택하면 gender 변수의 값이 바뀌면서 조건부 렌더링이 다시 동작함
이때 조건부 렌더링의 조건식이 거짓이므로 "(성별) 이시군요~!" 가 출력됨
조건부 렌더링을 할 때는 꼭 if 조건부 렌더링, if ~ else 조건부 렌더링 방식으로만 해야할까?
아님
아래의 Panel 컴포넌트와 같이 컴포넌트를 만들어 상황에 맞는 태그를 출력(렌더링)하도록 할 수 있음
Panel 컴포넌트 안에서 useState 훅으로 선언한 gender 변수를 사용했기 때문에 gender 변수의 값이 바뀔 때 마다 Panel 컴포넌트가 호출되면서 상황에 맞는 p 태그가 출력됨
import React, { useState } from 'react';
function Component12() {
const [gender, setGender] = useState(null);
let selectedGender = (event) => {
setGender(event.target.value);
}
let Panel = () => {
if(gender == null) {
return <p>성별을 선택하세요~!</p>;
} else {
return <p> {gender} 이시군요~!</p>
}
}
return(
<div>
<p>성별 :
<input type="radio" value="남성" name="gender" onChange={selectedGender} />남성
<input type="radio" value="여성" name="gender" onChange={selectedGender} />여성
</p>
<hr />
{Panel()}
</div>
);
}
export default Component12;
여기까지 useState 훅을 익히고 조건부 렌더링을 배웠음
useState 훅, 조건부 렌더링은 굉장히 자주 사용하므로 잘 기억해두자
'JS + React > React-Chapter03' 카테고리의 다른 글
| Chapter03. 리엑트 훅 / useRef 훅 (0) | 2023.04.01 |
|---|---|
| Chapter03. 리엑트 훅 / useEffect 훅 심화, 컴포넌트 라이프 사이클 (0) | 2023.04.01 |
| Chapter03. 리엑트 훅 / useEffect 훅 (0) | 2023.03.31 |
| Chapter03. 리엑트 훅 / useState 훅 기초 (0) | 2023.03.30 |
| Chapter03. 리엑트 이벤트 핸들링 (0) | 2023.03.30 |