react 6일차

위범석·2022년 7월 18일

일단 첫번째 내가 몰랐던 사실
1. 내가 무의 식으로 쓰던 ... 연산자는 괄호를 벗겨준다
ex) let [shoes,setShoes] = useState(data) data에는 객체 배열 3개 들어있음

setShoes([...shoes]); << 이렇게 되면 괄호를 벗겨주고 나서, 다시 독립적인 메모리에 저장시킨 다음에 (깊은복사) 후 다시 배열로 감싸준다.

context api를 배우게 되었는데...
일단 redux를 들어보고 결정을 해보자 현재는 나는 props를 쓰는게 익숙해져서 그런지 contextapi처럼 범위 지정해서 사용은 아직은 지양 할꺼 같다.

Tab 만들기와 리액트에서의 애니메이션

그리고 애니메이션을 부여해보도록 합시다. 애니메이션은 그냥

일반 CSS 짜듯이 애니메이션 class를 하나 만들어두고
컴포넌트가 보여질 때 / 업데이트될 때 className에 부여되도록 코드를 짜시면 됩니다.

근데 그 논리 생각하기 귀찮으면 react-transition-group이라는 라이브러리를 사용합니다.

거기서 시키는대로만 하면 딱히 생각을 안해도 애니메이션이 쉽게 부여됩니다.

react-transition-group 이라는 라이브러리를 설치하시면 간단한 애니메이션 부여하기 쉽습니다.

npm install react-transition-group

import {CSSTransition} from 'react-transition-group';
17 분
Tab 만들기와 리액트에서의 애니메이션 (react-transition-group)

0:00 탭 만들기 - 일단 디자인부터

4:26 탭 만들기 - 본격 기능개발

9:38 애니메이션 부착하는 법

이쯤되면 혼자서 다 할 수 있겠지만 걱정되서 준비했습니다.

탭 UI를 만들어봅시다.

그리고 애니메이션을 부여해보도록 합시다. 애니메이션은 그냥

일반 CSS 짜듯이 애니메이션 class를 하나 만들어두고
컴포넌트가 보여질 때 / 업데이트될 때 className에 부여되도록 코드를 짜시면 됩니다.

근데 그 논리 생각하기 귀찮으면 react-transition-group이라는 라이브러리를 사용합니다.

거기서 시키는대로만 하면 딱히 생각을 안해도 애니메이션이 쉽게 부여됩니다.

가벼운 마음으로 탭을 만들어봅시다

복잡해보이는 탭도 역시 UI 만드는 법을 떠올리시면 됩니다.

그냥 모달창만들듯 하면 되는데, 서로 배타적인 모달창이 3개라고 생각하고 만들면 됩니다.

Detail.js에다가 HTML부터 짜보도록 합시다.

(Detail.js)

function Detail(){
return (

<div>
  <button>버튼0</button>
  <button>버튼1</button>
  <button>버튼2</button>
  <div>내용0</div>
  <div>내용1</div>
  <div>내용2</div>
</div>

)
}
▲ 탭은 별거 아니고 그냥 버튼3개, div 3개가 있는 UI입니다.

그리고 버튼을 누르면 각각 거기 맞는 div를 보여줄 뿐입니다.

이것도 역시 UI 만드는 법을 떠올리시면 쉽습니다.

몇번째 버튼 눌렀는지를 state로 저장해둠
state에 따라 div를 보이게/안보이게 해주시면 됩니다.

이번엔 state에 true/false 같은 데이터를 저장하는게 아니라 숫자를 저장할겁니다.

버튼이 3개니까 몇번째 버튼을 눌렀는지 0,1,2 같은 숫자데이터를 저장해야 할 것 같으니까요.

근데 지금은 약간 디자인이 하찮아서 코드짤 맛이 나지 않습니다.

그래서 React-bootstrap 사이트 들어가셔서 Tabs 라고 검색한 뒤에 버튼들을 복붙해서 진짜 버튼같은 UI를 만들어봅시다.

(Detail.js)

function Detail(){
return (

<div>
  <Nav variant="tabs" defaultActiveKey="link-0">
    <Nav.Item>
      <Nav.Link eventKey="link-0">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link-1">Option 2</Nav.Link>
    </Nav.Item>
  </Nav>
  <div>내용0</div>
  <div>내용1</div>
  <div>내용2</div>

</div>

)
}
▲ 이제 좀 멋있는 버튼이 생성된 것 같습니다. (당연히 Nav라는거 상단에 import 해오셔야합니다 react-bootstrap으로부터요)

그럼 일단 UI 만드는 법에 따라 쭉 해봅시다. 일단 UI의 상태를 저장할 state부터 만들어줍시다.

그리고 버튼을 누르면 각각 state가 0,1,2로 변하도록 만들면 되겠네요.

거기까지가 우리가 했던 UI 만드는법이었음

(Detail.js)

function Detail(){

let [누른탭, 누른탭변경] = useState(0);
return (

<div>
  <Nav variant="tabs" defaultActiveKey="link-0">
    <Nav.Item>
      <Nav.Link eventKey="link-0" onClick={()=>{ 누른탭변경(0) }}>Active</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link-1" onClick={()=>{ 누른탭변경(1) }}>Option 2</Nav.Link>
    </Nav.Item>
  </Nav>
  <div>내용0</div>
  <div>내용1</div>
  <div>내용2</div>

</div>

)
}
▲ Detail 컴포넌트 안에서만 쓸 것 같으니 여기다가 state 만들어놨습니다.

그 다음에 버튼에다가 onClick을 입력해서 버튼을 누르면 state가 각각 0, 1, 2로 변하게 만들어주면 되겠습니다.

그 다음에 할일은 뭔가요. state의 현재상태에 따라 UI를 보여주면 되는 것이 아닐까요.

state가 0이면 0번 div를 보여줌

state가 1이면 1번 div를 보여줌

이런거 if문으로 짜놓으면 UI 완성입니다. 아이쉬운것

근데 간단한 if/else문은 삼항연산자를 썼었는데 if 갯수가 늘어나면 삼항연산자만으로는 약간 난해할 수 있습니다.

그래서 그냥 if문을 적용한 컴포넌트를 하나 만드시는 것도 좋은 선택입니다.

그래서 만들어봤습니다.

(Detail.js)

function Detail(){

let [누른탭, 누른탭변경] = useState(0);
return (

<div>
  <Nav variant="tabs" defaultActiveKey="link-0">
    <Nav.Item>
      <Nav.Link eventKey="link-0" onClick={()=>{ 누른탭변경(0) }}>Active</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link-1" onClick={()=>{ 누른탭변경(1) }}>Option 2</Nav.Link>
    </Nav.Item>
  </Nav>
  <TabContent />

</div>

)
}

function TabContent(){
if (누른탭 state가 0이면..){
return

내용0

} else if (누른탭 state가 1이면..){
return

내용1

} else if (누른탭 state가 2면..){
return

내용2

}
}
▲ 만들었습니다. 근데 누른탭 state를 써야하는데 그건 부모 컴포넌트에 있죠?

props로 전송하면 쓸 수 있겠군요.

(Detail.js)

function Detail(){

let [누른탭, 누른탭변경] = useState(0);
return (

<div>
  <Nav variant="tabs" defaultActiveKey="link-0">
    <Nav.Item>
      <Nav.Link eventKey="link-0" onClick={()=>{ 누른탭변경(0) }}>Active</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link-1" onClick={()=>{ 누른탭변경(1) }}>Option 2</Nav.Link>
    </Nav.Item>
  </Nav>
  <TabContent 누른탭={누른탭} />

</div>

)
}

function TabContent(){
if (props.누른탭 === 0){
return

내용0

} else if (props.누른탭 === 1){
return

내용1

} else if (props.누른탭 === 2){
return

내용2

}
}
▲ 탭만들기 성공입니다.

UI 만드는법만 잘 기억하면 모든 UI는 쉽게쉽게 만들 수 있습니다.

애니메이션을 어떻게 넣냐면

그냥 대충 HTML CSS 짤 때랑 똑같습니다.

애니메이션 주는 class를 CSS 파일에 열심히 짜서 제작해놓고
컴포넌트 등장/업데이트시 className을 부착하시면 됩니다.

className을 어떻게 원할 때 부착하냐고요? className={} 이렇게 중괄호안에 삼항연산자 if문을 쓰든가 하시면 됩니다.

끝입니다. 내가 CSS를 잘한다 그러면 이렇게 개발하는게 훨씬 쉽습니다.

근데 이런 생각을 하기 귀찮거나 나의 CSS 스킬이 갓 태어난 밤비 다리처럼 흔들흔들하다면

라이브러리 설치 후 사용도 좋은 방법입니다.

react-transition-group 이라는 라이브러리를 설치하시면 간단한 애니메이션 부여하기 쉽습니다.

쉬운건 아니고 패턴만 아시면 됩니다.

터미널 켜서

yarn add react-transition-group

npm install react-transition-group

둘 중 하나 입력합시다.

설치가 끝났다면 애니메이션 주고 싶은 컴포넌트 파일 상단에

(Detail.js)

import {CSSTransition} from 'react-transition-group';
이런걸 import 해오시면 끝입니다.

그럼 step1. 으로 애니메이션 적용할 HTML들 감싸면 됩니다.

그럼 step2. 그리고 거기에 in, classNames, timeout 속성 넣으십시오.

<div>
      <CSSTransition in={true} classNames="wow" timeout={500}>
        <TabContent 누른탭={누른탭} />
      </CSSTransition>
</div>

step3. 그럼 Detail.js에 딸려있는 CSS 파일로 가셔서 애니메이션을 하나 디자인해주시면 됩니다.

(Detail.scss)

.wow-enter {
opacity : 0
}

.wow-enter-active {
opacity : 1;
transition : all 500ms;
}
아까 작명한 wow라는 애니메이션의 작동방식/정의를 내려주시면 됩니다.

.작명-enter 라는 클래스명은 컴포넌트 등장시작시 적용할 CSS

.작명-enter-active 라는 클래스명은 컴포넌트 등장중일시 적용할 CSS입니다.

저는 투명도를 0~1로 변경하기 위해 저렇게 했습니다. 그리고 transition은 서서히 변하게 해주세요~ 라는 속성입니다.

위범석

코린이

이전 포스트

React5일차~~중요한 useEffect

다음 포스트

react 6일차

Tab 만들기와 리액트에서의 애니메이션

React5일차~~중요한 useEffect

React(Redux)

0개의 댓글