생애 첫 프로젝트를 들어가면서 props를 전달하는게 너무 어려웠다🤦♀️
로그인과 회원가입에 쓰이는 버튼과 상품 상세 페이지에 버튼 스타일은 똑같아서 Component 하고 width 값만 props로 받으면 되던터라 이걸 어떻게 해야할까 방법을 모색했다.
처음에는 인라인으로 바로 입력도 해봤지만 실패했고
혹시나 하는 마음에 useState도 해봤지만 ㅎㅎ(물론 이것은 UI에 대한 변화가 아니기 때문에 되지 않는다 😢)
열심히 서치도 해봤도 어떻게 해야하지 고민이 들었다,,,어차피 이것은
css적인 효과가 달라지는 것이기 때문에 아무리 생각해도 scss를 건드리는게 맞지 않나 라는게 결론이었다.
그래서 성공했던 방법은 button의 부모가 되는 div에 width 값을 100%를 주는 것이었다. 이렇게 되면 성공은 됐지만 본질적으로 Component를 하는 의미가 사라지게 된다ㅠㅠ
그러다 Template Literal 방법을 알게됐고 해당 문제를 해결했다!!!!!
1.What 템플릿 리터럴(Template Literal) ?
ES6부터 새로 도입된 문자열 표기법이다.
문자열 생성시 따옴표 대신, 백틱(` ) 을 사용한다. 템플릿 리터럴은 placeholder를 이용하여 표현식을 넣을 수 있다. 이는 $와 ()로 표기할 수 있다.
템플릿 리터럴의 가장 큰 장점 중 하나는 템프릿 리터럴 내부에서는 변수를 사용할 수 있다는 점이다. let,const로 정의한 값을 ${}로 불러와서 사용이 가능하다.
Expression Interpolation
${}로 생긴 문법을 많이 볼 수 있는데 Expreesion Interpolation은 문자열 사이에 js코드나 변수를 삽입해야 할 때 유용하게 쓰일 수 있는 기능이다..
let number=7;
console.log("이거는 그냥" + number + "써주면 완성이지 참 길죠? );
//기존에 사용법
let number = 7;
console.log(`이거는 그냥 ${number} 써주면 완성이지 참 쉽죠?`);
//Expression Interpolation 사용법이렇게 간단하게 변수 표현도 가능하고 js 코드도 삽입이 가능하다
console.log(`당신의 성별은 ${gender ? "남성 : "여성} 입니다 `);
// 결과 : 당신의 성별은 남성 입니다.
What Tagged Templates?
Tagged Template은 템플릿 리터럴로 감싸진 내용들을 인자로 하여금 함수에 대입을 할 수 있게 해주는 기능이다.
*템플릿 리터럴 앞에 함수 이름을 표기해주면 된다.
what 중첩 Templates?
JSX에서 props 인용 된 속성 내에 값을 참조 할 때 어떻게 하면 좋을까.
ex)
→img className ="image" src = "images/{this.props.image}" />
→ <img className = "image" src ={`images/&{this.props.images}`} />
2.What 구조분해 할당 ?
구조분해 할당은 배열 혹은 객체에서 특정 데이터를 뽑아내어 각각 별도의 변수에 저장하는 것을 말한다. React 같은 경우 UI를 만들 때 표시하는 데이터를 다루는 경우가 많으므로 알아두면 좋다 !!!
(실제로 엄청 많이 쓰이니 어렵더라도 이해하려고 매우 노력했다....!)
[a,b] = [1,2];
//배열에 각각 변수를 할당
const list = {
merry : 1,
jenny : 2,
bona : 3
};
//객체에서 해당하는 이름의 변소로 한번에 할당하기
const { merry, jenny , bona } = list;
console.log(merry); //1
console.log(jenny); //2
console.log(bona); //3
//객체에서 해당하는 이름의 변소로 한번에 할당하기✍✔즉,Button Component에 width props를 전달 할 때 이와 같은 개념들이 필요했다.
button에 {button ${format ? format : ''}} 을 주고 해당 Button.scss에 각 사이즈별로 세분화하여 값을 전달했다 :-)
