Javascript는 변수 선언코드가 함수 선언코드보다 뒤에 작성되어 있더라도
변수 선언을 끌어 올려 일단 undefined로 선언한 후에 상단에서부터 순서대로 코드를 실행한다.
순서대로 코드를 실행해나가다가 변수를 할당해주는 코드를 읽으면 그 때서야 undefined로 선언한 변수에 값을 할당해 준다.
여기서 변수를 undefined로 선언하고 값을 할당해주기 전에 데이터를 불러오면 에러가 발생한다.
때문에 에러 없이 데이터를 불러오기 위해서는 조건부렌더링을 사용해야한다.
조건부 렌더링에는 대표적으로 3가지 방법이 있다.
1. 삼항 연산자
data ? data.fetchProfile : undefined위 코드는 삼항 연산자를 이용하여 데이터가 있을 때는 data.fetchProfile을 data가 없을 때는 undefined를 반환하는 방법이다.
2. && 연산자
data && data.fetchProfile위 코드는 &&연산자로 &&앞의 데이터가 참일 때 &&뒤의 값을 반환한다.
이와 반대 되는 개념으로 ?? , || 연산자가 있다.
data || data.fetchProfile
data ?? data.fetchProfile위와 같이 사용하며 ??연산자는 앞의 값이 빈 값이면 뒤의 값을 반환하고,
||연산자는 앞의 값이 거짓(false)일 경우 뒤의 값을 반환해준다.
3. Optinal-Chaining(옵셔널 체이닝)
옵셔널 체이닝은 && 연산자를 더욱 간결한 코드로 사용하는 연산자이다.
data?.fetchProfile와 같이 사용하며 ? 앞의 객체의 참조가 undefined 이거나 null 이라면 undefined를 반환해준다.
Developer