React 입문 - part 2 (2024. 5. 11.)

0. 기본정보

#스파르타코딩클럽 #부트캠프 #주말자습
- 학습주제: React 입문

- 학습내용: 화살표 함수, 삼항연산자, 단축평가(||, &&, ?., ??)

- 특별사항: (없음)
- 학습일: 2024. 5. 11.

---

1. 배운 내용 요약

1) 화살표 함수

- 참고 : 2024.05.11 - [JavaScript] - 화살표 함수: () => {}

 

2) 삼항연산자

(보류)

 

3) 단축평가 : || (논리합 연산자)

- 참고: 2024.05.11 - [JavaScript] - 논리 연산자 : ||, &&, !

- 논리합 연산자(||)는 좌변의 피연산자가 falsy 값일 때만 우변의 피연산자를 평가함
  cf. falsy 값 : false, 0 ,"", null, undefined, NaN

- 좌변의 피연산자가 truthy 값일 경우, 그 값이 바로 결과값으로 반환되며, 우변은 평가되지 않음

// 유저 정보가 제공되지 않았을 때 기본 이름 제공
function getUsername(user) {
    return user.name || '신원미상';
}

/* 아래 내용을 함축한 것이다 
function getUsername(user) {
	if(user.name === undefined) {
    	return "신원미상"
    }
    return user.name
}
*/

console.log(getUsername({ name: '르탄이' })); //르탄이
console.log(getUsername({})); //신원미상

 

4) 단축평가 : && (논리곱 연산자)

- 논리곱 연산자(&&)는 좌변이 truthy일 때만 우변을 평가함

- 조건에 따라 특정 코드를 실행하고자 할 때 유용함

// 사용자가 로그인 상태이면 환영 메시지를 출력
let loggedIn = true;
let username = '르탄이';
loggedIn && console.log('환영합니다! ' + username); //환영합니다! 르탄이

loggedIn = false;
loggedIn && console.log('환영합니다! ' + username); //아무것도 출력되지 않음

 

5) 단축평가 : ?. (Optional Chaining)

(보류)

 

6) 단축평가 : ?? (Null 병합 연산자)

- 참고: 2024.05.11 - [JavaScript] - Null 병합 연산자 : '??'

- Null 병합 연산자(??) 는 좌변이 null 이나 undefined일 경우에만 우변을 평가함

- null 또는 undefined 이 아닌 경우 falsy 값(예: 0, "" 등)들을 유효한 값으로 처리하고 싶을 때 사용함

// 사용자의 위치 설정이 없으면 기본 위치를 제공
let userLocation = null;
console.log(userLocation ?? 'Unknown location');  // 출력: Unknown location
/* 아래 내용을 추약한 것입니다.
console.log(userLocation ? userLocation : 'Unkonwn location')
==> 삼항 연산자를 사용할 경우 'userLocation' 두 번 작성해야 하는 귀찮음(=비효율성)이 발생함
*/

userLocation = 'Seoul';
console.log(userLocation ?? 'Unknown location');  // 출력: Seoul

// 사용자 입력이 0인 경우에도 0을 유효한 값으로 취급
const temperature = 0;
console.log(temperature ?? 25);  // 출력: 0

 

---

3. 오늘의 회고

- 칭찬: 자발적으로 주말 자습스터디를 개최한 것 (팀원들 참석 덕분에 더 동기부여 됨!) 

- 반성: 취침 전 스마트폰 한 것 (그래서 늦게 일어나게 되었고, 자습시간 2시간 날림..)

- 보충: 1) 스마트폰은 책상에 두고 잠자러 가기 (기상 알람은 미리 세팅하기!)

            2) 다음날 공부할 내용 미리 계획 세우기 (욕심🙅‍♀️ 반드시 지킬 수 있는, 필수적인 것만🙆‍♀️)