[React.js] 리액트의 State 기능

 

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 함수로 감싸줘야 한다고 한다.