Coding/react
[React] 리액트에서 탭 UI 만들기 (+props 꿀팁, array )
Kim Da Beeen
2023. 2. 14. 17:46
반응형
1. html, css 탭 디자인 미리 완성하기
리액트 부트스트랩에서 그대로 가져오면 된다.
2. UI의 현재 상태를 저장할 state 하나 만들기
버튼0 / 버튼1 / 버튼2 누르면 각각 내용이 보여야 하므로
state 상태를 0, 1, 2 숫자로 설정한 후
해당 버튼 누를시 state 값 변경되게 설정한다.
3. state에 따라서 UI가 어떻게 보일지 작성
ex)
state가 0이면 버튼0 내용 보여주세요
state가 1이면 버튼1 내용 보여주세요
state가 2이면 버튼2 내용 보여주세요
삼항연산자로 만들어보기
**삼항연산자는 안타깝게도 연달아서 여러개 쓸수 없어서
중괄호 또 열어서 만들어야된다.
뭔가 복잡
일반 if 조건문
삼항연산자로 조건 여러개 만들면 복잡하므로 if조건문 쓰는게 더 효율적이다.
if 조건문은 <html> 태그 안에 쓸수 없어서 바깥에 쓰기!
html 밖에 있는 if조건문을 html 안으로 집어넣고 싶으면?
컴포넌트로 담아서 html에 집어넣으면 됨
주의할점 *컴포넌트이기 때문에 if 조건문 쓸때 반드시 return 문을 써야함
props 꿀팁
props.블라블라 쓰기 귀찮으면 중괄호 안에 블라블라를 넣기 → {블라블라}
복잡한 if문대신 array로
if문 안에 들어있는 <div>내용</div>을
array에 순서대로 넣어서 인덱싱하기
[tab]은 state 값이므로 사용자가 버튼 클릭할때마다 0 / 1 / 2 로 바껴서 인덱스로 활용 가능하다.
반응형