React #2 |Styled-components /비구조화 할당

김하은·2022년 10월 19일

React ReactStudy

React

목록 보기

8/13

React의 기본 주소와 포트

localhost:3000

localhost = 본인 IP주소 = 127.0.0.1:3000;
localhost:3000

package.json

script

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev": "react-scripts start"
},

start: 배포하기전, 사용자가 보는 화면을 개발자가 확인할 때
build: 배포용 , 배포 폴더를 만들기 위하여 사용
test: TDD (테스트 주도 개발) -- 유닛테스트 -- "jest"
eject: 숨겨진 모든 설정을 밖으로 추출해주는 명령어(웹팩, 바벨 커스텀)
dev: 개발자가 보는 화면을 개발자가 확인할 때

dependencies

설치되어 있는 라이브러리들의 키 값
node_modules 폴더에 라이브러리들이 설치 되어 있음.
용량이 크다
따라 , npm i / npm install 이라는 명령어를 치게 되면 package.json의 dependencies 에 명시되어있는 라이브러리들을 알아서 설치
(node_modules 폴더가 생성)

npm i

node_modules가 없는 상태로 우리에게 전달
git 있는 것을 clone을 받아도 마찬가지의 형태

PORT 변경하기

SET PORT=3001 &&
(EXPORT)

CSS-in-JS

style.css 와 같은 css 파일을 만들어서 css 적용
js 안에서 css 문법을 사용하고 적용시킬 수 있는게 css-in-js
=> styled-components, Emotion

사용이유?

React와 같은 SPA에 개발에서 js 안에서 html,js 를 모두 기술
따라서 문서의 구조와 로직에 스타일링 코드가 같은 위치에 위치 시킬 수 있음.
=> 응집도를 높일 수 있음.
=> 굳이 다른 파일을 가지고 오거나 옮겨 다니지 않아도 (부하를 감소) 개발하고 있는 그 컴포넌트 자체에 집중할 수 있게한다.

Styled-components

React의 css 스타일링 방법 중 하나
css 파일이 아닌 js 파일에 직접 기술하는 css in js의 한 종류
컴포넌트 호출 시 필요한 css만 호출
className을 사용하지 않아 겹치는 오류 방지.
ex) 사용법

<LoginForm>
  ...
<LoginForm/>
  
 const LoginForm = styled.div`
  		...css 속성
  `

그외의 방법
SASS > SCSS

css의 상위 버전 문법
복잡한 작업을 쉽게 해주고, 코드의 재 활용성을 높여줌
css 내에서 변수 사용이 가능 - 확장성이 높음
코드의 가독성을 높여주고 유지보수를 쉽게 해준다

Emotion

styled-components 와 대체될 유망주, 그러나 styled-components와 사용법이 똑같습니다.
emotion 만의 문법 (+) styled-components 보다 아주 약간 가볍다.
하지만, 시장에선 압도적으로 styled-components 주로 사용.
ex) 사용법

const LoginForm = css`
	..css 속성
`

styled처럼도 사용할 수 있음

🔥 보통의 라이브러리들은 시간이 지나면 사용법이 바뀌거나 프로젝트에
적응이 안되는 경우가 많이 있다.

단, 완전히 대체되는 경우가 존재.
ex)
변수를 전역으로 관리할 수 있는 라이브러리
contextAPI/useReducer -> redux => mobx -> recoil/React.Query

삼항 연산자

조건부 랜더링 방식에 사용된다.
(조건에 충족할 경우 해당 부분을 리랜더)

{조건식 ? true인 경우 : false인 경우}
{조건식 && true인 경우} = {조건식 ? true인경우 : null}

{}, 빈 배열 = 값이 있는걸로 쳐진다.
배열일 때 (console.log 를 찍어보면 "null", "undefined" 가 아닌 빈배열출력)
{조건식.length > 0 && true인 경우}

조건식의 맞는 배열의 값에 객체 형태나 배열의 형태로 오면 안이 비어있어도 null, undefined 가 찍히는게 아니라 빈 객체 , 빈배열이 출력된다. "값"이 없어도 "값"이 있다고 인식하기 때문에
배열일때는 조건식의 배열 길이가 " > 0 보다 큰지" 에 따라서 삼항연산자나, && 연산자를 사용한다.

props

상위 컴포넌트(부모 컴포넌트)의 값을 하위 컴포넌트에 전달할 변수를 칭하는 말

비구조화 할당(구조분해 할당)

배열이나 객체의 속성을 해제하여 그 값을 개별 변수에 담을 수 있도록 사용하는 JavaScript 표현식
ex)

const { 객체내 키 값 } = 객체명;

-> 객체명에서 key 값을 찾고 , 객체의 value 를 키값에 넣어준다.

ex)

const fruits = {
    apple:"사과",
    banana: "바나나",
    orange: "오렌지"
}
console.log(fruits);
// { apple: '사과', banana: '바나나', orange: '오렌지' } 출력
console.log(fruits.apple);
// 이렇게 하위 선택자로도 많이 사용한다. 

** 다른 방법
const {apple} = fruits;
// 이렇게 키 값으로 찾을수도 있다. 결과 "사과"가 출력된다.

📍 배열을 키 값이 아닌, 인덱스 순서로 값을 받아올 수 있음.
ex)

const fruits = ["딸기","포도","복숭아"];

console.log(user[0]); // 딸기 출력 

// 하지만 , 인덱스 번호에 값에 맞게끔 순서대로 변수안에 값을 넣을수 있다.
ex)
const [strawberry, graps, peach] = fruits;

console.log(strawberry); // 딸기 출력

배열의 비구조화 할당

 const cat = {
 	name:'해리',
    age: 10,
    weight: 10
 }
 
 const desCat = (name, age, weight) => {
 	console.log('우리집 고양이의 이름은 ${name}입니다. 그리고 나이는 ${age}살 이고 무게는 ${weight}kg 입니다')
 }
 // 출력
 우리집 고양이의 이름은 해리입니다. 그리고 나이는 10살 이고 무게는  10kg 입니다
 
 ** 다른 방법 (cat) 으로만 전달하고 싶을때 
 
const desCat = ({name, age, weight}) => {
 console.log('우리집 고양이의 이름은 ${name}입니다. 그리고 나이는 ${age}살 이고 무게는 ${weight}kg 입니다')
 }

desCat(cat);