React 의 조건부 랜더링 ( if ~else )

React의 조건부 랜더링 ( if ~else )을 설명하기 앞서 먼저 알아두어야 할 몇 가지가 있다 

 

• JSX 에는 문이 못들어가고 값만 들어갈 수 있음
• JSX에는 if ~ else 가 없다
• 함수를 만들어서 사용하면 if ~ else를 사용할 수 있다

👍그럼 이제 React 에서 if ~else를 사용하는 법 을 알아보자 

 

리액트 조건부 랜더링 으로 검색하면 자주 보이는 삼항 연산자

App.js 에서 랜덤 값을 주고 삼항 연사자 코드를 사용한 컴포넌트를 불러주면

화면에 짜잔!!!✌

화면에 잘 나오고 정상적인 코드이지만 지금의 경우에는 정말 간단한 예제이지만 복잡한 코드라고 가정하면 삼항 연산자는 가독성이 떨어진다

 

⭐⭐그래서 차라리 함수를 하나 만들어서 if ~else를 사용하는 방법을 사용해 보려 한다

 

이렇게 함수를 하나 만들어서 사용하면 자유롭게 if~else 나 Switch 문을 사용할 수 있다

 

❗❗하지만 이 코드는 지금 실행하고 나서 값이 변하거나 다시 랜더링을 해야 하는 상황이 된다면 컴포넌트 가 실행될 때마다 위 코드가 다시 실행된다

이렇게 컴포넌트 밖에다 함수를 선언해서 사용하면 좀 더 효율적으로 사용할 수 있다

 

✨리액트에서 if ~else 나 Switch를 못쓴다고 생각하는 경우가 있는다 이 말은 반은 맞는 말이지만 반은 틀린 말이다 그 이유는 컴포넌트에서는 문을 사용할 수 없기 때문에 if ~else를 사용할 수 없다

하지만 위 방법처럼 사용하면 함수를 선언하고 함수를 호출하는 방법이기에 충분히 사용할 수 있다