웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
react native에서 원하는 컴포넌트 및 태그 요소를 숨기는(hide) 방법을 알아보겠습니다. 어떻게하면 숨길 수 있을까요?
1. height, width 값을 0으로 만들기
style의 height와 width값을 0으로 설정하는 방법으로 간단하면서 빠른 방법입니다. opacity의 경우 현재 영역을 계속 차지하게 되는데 오히려 영역 차지가 없어야한다면 이 방법을 사용하는 것이 효과적입니다.
단점은 overflow: hidden이 되지 않아 자식 요소까지 모두 사라지지 않습니다. 모든 자식을 동일하게 처리하거나 다른 방법이 필요합니다.
2. opacity 값 0 만들기
이 방법 역시 매우 간단한데 style의 opacity값으로 0을 설정하면 됩니다. 장점은 영역은 그대로 남게되나 단점이 될수도 있습니다.
3. 컴포넌트 요소에 조건문 추가하기
조건문을 사용하여 자식 및 하위 컴포넌트가 적용되지 않도록 분기하는 방법입니다. 이 방법은 숨길 영역이 컴포넌트인 경우 주로 사용됩니다. 예를들어 만약 Test라는 컴포넌트를 안보이도록 아래처럼 설정할 수 있을 것입니다.
만약 해당 컴포넌트를 보이도록 바꾸려면 isShowTest 변수값을 변경하면 매우 간단하게 가능하죠.
아래와 같이 사용할 수도 있습니다. 결과는 동일합니다.
이처럼 컴포넌트를 숨기고 보여줄 수 있는 다양한 방법이 존재합니다.
# react native 컴포넌트 요소 숨기기
css를 사용하는 경우 display: none을 사용할 수 있겠지만 아쉽게도 react native에 적용 가능한 style에는 display가 없습니다. 이 경우 안보이도록 만드려면 몇 가지 방법이 존재합니다. 대표적인 방법은 아래와 같습니다.1. height, width 값을 0으로 만들기
style의 height와 width값을 0으로 설정하는 방법으로 간단하면서 빠른 방법입니다. opacity의 경우 현재 영역을 계속 차지하게 되는데 오히려 영역 차지가 없어야한다면 이 방법을 사용하는 것이 효과적입니다.
단점은 overflow: hidden이 되지 않아 자식 요소까지 모두 사라지지 않습니다. 모든 자식을 동일하게 처리하거나 다른 방법이 필요합니다.
2. opacity 값 0 만들기
이 방법 역시 매우 간단한데 style의 opacity값으로 0을 설정하면 됩니다. 장점은 영역은 그대로 남게되나 단점이 될수도 있습니다.
3. 컴포넌트 요소에 조건문 추가하기
조건문을 사용하여 자식 및 하위 컴포넌트가 적용되지 않도록 분기하는 방법입니다. 이 방법은 숨길 영역이 컴포넌트인 경우 주로 사용됩니다. 예를들어 만약 Test라는 컴포넌트를 안보이도록 아래처럼 설정할 수 있을 것입니다.
return (
isShowTest = false;
<View>
if (isShowTest) {
<Test />
}
</View>
)
isShowTest = false;
<View>
if (isShowTest) {
<Test />
}
</View>
)
만약 해당 컴포넌트를 보이도록 바꾸려면 isShowTest 변수값을 변경하면 매우 간단하게 가능하죠.
아래와 같이 사용할 수도 있습니다. 결과는 동일합니다.
return (
isShowTest = false;
<View>
{ isShowTest && <Test /> }
</View>
)
isShowTest = false;
<View>
{ isShowTest && <Test /> }
</View>
)
이처럼 컴포넌트를 숨기고 보여줄 수 있는 다양한 방법이 존재합니다.
아래의 글도 찾고 계시지 않나요?
