IT&컴퓨터공학/React&ReactNative
-
[React Native] useState 를 이용해 Expandable View 만들기IT&컴퓨터공학/React&ReactNative 2021. 1. 24. 18:20
Material UI 에서 정말 맘에드는 Expandable 한 View 를 찾았는데 native 에는 지원을 안하는건지 돌아가지를 않아서 직접 간단하게 구현해보려고 한다. 일단 기능 구현에 집중한 뒤 , 스타일을 이쁘게 다듬어 보자 해당 화면에서 OPEN 이라는 버튼을 누르면 이렇게 파란 화면이 펼쳐지는 expandable View 를 만들어보자! 버튼을 눌렀을때 경우 1) 파란색 View 가 열려져있는경우 width : 0 px , height : 0px 로 바꾸고 경우 2) 파란색 View 가 닫혀져있는경우 width : 100% , height : 300px 로 바꾸자 구조잡기 //빨간색 View 귀여운 강아지 //파란색 View // Detail 은 styled component 로 따로 설정한..
-
[React] Hook 이란 ?IT&컴퓨터공학/React&ReactNative 2021. 1. 19. 23:30
Hook 이란 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. Hook 을 이용해서 Class 를 작성할 필요없이 상태값과 여러 React 의 기능등을 사용할 수 있다 Hook 의 종류 State Hook : 가장 기본적인 Hook . 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줌 위에서 useState 가 바로 hook 이다. useState 는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 위의 예제에서 현재의 state 값은 count , ..