리액트
[React.js] 리액트의 State 기능
TheChok
2022. 9. 5. 16:10
State 기능에 사용할 변수를 만든다.
변수는 const [변수, set변수] 형식으로 만들고 값에 useState(값); 을 넣는다.
<Article> 태그 내용을 상황에 맞게 바꿔줄건데
const [mode, setMode] = useSatate('WELCOME'); 에서
기본 값은 WELCOME이고 mode에 담겨있다.
if문 첫 번째는 랜더링 후 보여지는 부분이고
if문 두 번째는 useState로 바뀐 뒤에 보여질 모습이다.
파란색 박스의 for문은 <Nav> 태그에서 실행되는 <ol> 코드 부분의 id를 비교하는 내용이다.
<Header></Header>
<Nav></Nav>
<Article></Article> 이었던 코드가
<Header></Header>
<Nav></Nav>
{content} 로 바뀌었다.
출력되는 화면은 이렇게 나온다.
간단해 보이지만 내용을 들여다보니 꽤나 복잡한 기능인 것 같다.
머릿 속에서 느낌이 지워지기 전에 좀 더 연습해봐야겠다.
추가)
a태그의 id에는 {t.id} 값이 들어가는데 이때 숫자에서 문자로 타입이 바뀐다고 한다.
그래서 타입을 숫자로 유지시켜주기 위해 초록색 밑줄에 나오는 것처럼
event.garget.id를 Number 함수로 감싸줘야 한다고 한다.