[TIL] 내일배움캠프 React 과정 2024.05.10

오늘의 한 일

• 주특기 입문 주차 OT
• React 입문 강의
• 수준별 수업 OT

React JS 입문

1. 단축 평가

• 논리합 연산자 (||)

  • 좌변의 피연산자가 falsy한 값 (false, 0, "", null, undefined, NaN) 일 때만 우변의 피연산자를 평가한다.

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

• 논리곱 연산자(&&)

  • 논리곱 연산자 &&는 좌변이 truthy일 때만 우변을 평가한다.

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

• Optional Chaining (?.)

  • 객체의 속성에 접근할 때 해당 경로에 속성이 존재하지 않아도 에러를 발생시키지 않고, 대신 undefined를 반환한다.

    const user = {
      profile: {
          name: "르탄이",
          details: {
              age: 30,
              location: "서울시 강남구"
          }
      }
    };
    
    console.log(user.profile.details.age);  // 출력: 30
    
    const user = {};
    console.log(user.profile.details.age); // Error!!
    console.log(user.profile?.details?.age);  // 출력: undefined

• Null 병합 연산자(??)

  • ?? 연산자는 좌변이 null이나 undefined일 경우에만 우변을 평가합니다.

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

    
    

모듈 Import: CommonJS 방식

• 동기적 로딩
  • CommonJS 모듈은 파일이 로컬 디스크에 있기 때문에 동기적으로 로딩된다.
  • 이는 서버 환경에서는 문제가 되지 않지만, 브라우저 환경에서는 네트워크 지연으로 인해 문제가 될 수 있다.
• 단일 객체 내보내기
  • 모듈은 module.exports 객체를 통해 전체 모듈을 하나의 객체로 내보낸다.
  • 이 객체를 요구하는 다른 모듈은 require() 함수를 사용하여 가져온다.

// libs/math.js
module.exports = {
  add: function(x, y) {
    return x + y;
  },
  subtract: function(x, y) {
    return x - y;
  }
};

// app.js
const math = require('./libs/math');
console.log(math.add(2, 3)); // 5

모듈 Import: ES6 방식

• ES6에서는 export 키워드를 사용하여 모듈을 만들고, 다른 파일에서 사용할 수 있게 한다.
• import 구문을 사용하여 다른 파일에서 함수를 불러와 사용할 수 있다.

// math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
export const ONE = 1;
export const sample = {
	one: 1,
	two: 2
}

// app.js
import { add, multiply, ONE, sample } from './math.js';

console.log(add(2, 3)); //5
console.log(multiply(2, 3)); //6
console.log(ONE); //1
console.log(sample.two); //2

오늘의 회고