Today 공부
- React 삼항연산자
JSX안에서 쓰는 삼항연산자 (ternary operator)
조건문
? 조건문 참일때 실행할 코드
: 거짓일 때 실행할 코드 1 === 1
? <p>참이면 보여줄 HTML</p>
: null&& 연산자로 if 역할 대신하기
true && false; // false true && true; // true true && 'hello'; // hello false && 'hello'; // false --------------------------------------------- && 기호를 중첩해서 여러개 쓰면 && 사이에서 처음 등장하는 falsy 값을 찾아주고 그게 아니면 마지막 값을 남겨준다
이 변수가 참이면 <p></p>를 ,아니면 null ----> 1 === 1 && <p>참이면 보여줄 HTML</p>* && 연산자로 조건식과 오른쪽 JSX 자료를 비교 * 왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남는다 * 왼쪽 조건식이 false면 false가 남는다. * (false가 남으면 HTML로 렌더링하지 않습니다)
Shorthand property names(ES6)
object의 key 와 value가 동일하다면 하나로만 생략이 가능하다
const sunny1 = {
name: "sunny",
age: "20",
};
const name = "sunny";
const age = "20";
💥 const sunny2 = {
name: name,
age: age,
};
🌟 const sunny3 = {
name,
age
};Destructuring assignment(ES6) (구조분해할당)
object안에 정의 된 key의 이름을 동일하게 {괄호}안에 작성해서 선언해야한다
// object
const student = {
name: "sunny",
level: 1,
};
🤢
{
const name = student.name;
const level = student.level;
console.log(name, level); // sunny 1
}
😁
{
const { name, level } = student;
console.log(name, level); // sunny 1
}
다른이름으로 선언하고 싶을 경우
{ 기존 key : 사용하고싶은변수명 } = 객체이름
사용하고 싶은 변수명에 기존 key에 할당되었던 값이 담김const { name: studentName, level: studentLevel } = student; console.log(studentName, studentLevel) // sunny 1
//Array
const animals = ['🐶', '🐼'];
🤢
{
const first = animals[0];
const second = animals[1];
console.log(first, second); // 🐶 🐼
}
😁
{
const [first, second] = animals;
console.log(first, second); // 🐶 🐼
}Spread syntax
💡값을 복사하지 않고 , 주소의 참조값만 복사해온다
💡그래서 기존의 오브젝트 값을 변경하면 전부 다 변경된다
{
const obj1 = {key : 'key1'};
const obj2 = {key : 'key1'};
const array = [obj1,obj2];
//array copy
const arrayCopy = [...array]; // 주소의 참조값 복사(위와 동일한 값)
const arrayCopy2 = [...array, {key : 'key3'}];
// 주소의 참조값 복사(위와 동일한 값)
// 새 값 추가하는방법
//object copy
const obj3 = {...obj1};
// array concatenation
const fruits1 = ['🍅','🍇']
const fruits2 = ['🍑','🍎']
const fruits = [...fruits1, fruits2];
console.log(fruits) // ['🍅','🍇','🍑','🍎']
// object merge
const dog1 = { dog : '🐶' };
const dog2 = { dog : '🐕' };
const dog = {...dog1, ...dog2};
console.log(dog); // {dog : '🐕'}
// object의 경우는 key값이 같을 경우 뒤에있는 아이가 최종으로 값을 덮어씌워서 출력됨
}Default parameters
function 함수명(인자 = "초기 값")
기본적으로 원하는 초기값을 지정해주게 되면,
인자가 전달될때는 인자 값을,
전달되지 않았을때는 = " " 에 있는 초기값을 이용하게 된다.
function printMessage(message){
console.log(message); // undefined
}
function printMessage(message = 'default message'){
console.log(message); //default message
}Ternary Operator(삼항연산자)
const component = isCat ? '하이' : '바이';
console.log(component) // 하이
조건문
? 조건문 참일때 실행할 코드
: 거짓일 때 실행할 코드Template Literals
백틱 (``) ${변수} 이용해서 글쓰기
Optional chaining (ES11)
const person1 = { name: 'sunny', job: { title: 'S/W Enginner', manager: { name: 'Bob' } } }; const person2 ={ name: 'Bob' };
// 💩💩💩
function printManager(person) {
console.log(
person.job
? person.job.manager
? person.job.manager.name
: undefined
: undefined
);
// 💩
function printManager(person) {
console.log(person.job && person.job.manager && person.job.manager.name);
}
// ✨
function printManager(person) {
console.log(person.job?.manager?.name);
//person에 잡이 있으면? 매니저가있으면? 이름을 출력
}
Nullish Coalescing Operator (ES11)
or연산자는 앞에 있는 값이 false 일때만 뒤에 것이 실행
false: false, '', 0, null, undefined
// Logical OR operator
const name = 'sunny';
const userName = name || 'Guest'; // or연산자는 앞에 있는 값이 false 일때만 뒤에 것이 실행
console.log(userName); // sunny
const name = null;
const userName = name || 'Guest';
console.log(userName); // Guest
const name = '';
const userName = name ?? 'Guest'; // 이름이 있다면 이름을 쓰고, 이름에 아무런 값이 없다면 Guest를 이용하자
마치며,
최근 문제를 풀면서 사용하게 된 문법들이 많았는데, 공부했음에도 불구하고 헷갈리는 부분이 많아서 다시 공부했다.
드림코딩앨리님의 영상을 보면서 정리해보았는데 좋지않은(💩) 코드들이 어디서 많이 익숙해서(나) 만약 문제를 풀고나면 코드들을 다시 한번 확인해서 문법들을 이용하여 더 보기 좋은 코드로 작성할 수 있는지 확인해봐야겠다.
아직까지는 익숙하지 않은 문법들이라 조금 시간이 걸릴거 같다!
