이번 글은 이론 편입니다.
제가 생각하는 개발의 이론이 왜 필요한지에 대한 내용을 짧게 설명하고 가겠습니다.
자 육탄전을 벌이기 위해선 우선 몸을 키워야 겠죠
저는 이론이란 그런 훈련이라고 생각합니다.
실전 경험으로도 빠르게 몸을 만들 수 있지만
남들 3번 싸운 거 하나의 이야기로 내면, 전쟁을 나가지 않아도 3번의 경험을 한 것과 유사하다고요
리소룡이 형 보시고 졸때마다 0인치 주먹 한대씩 맞는다고 생각하고 집중해서 읽어주세요
💡 이번에 배울 개념들입니다
Component
Props
구조 분해할당
Import
간단하게 개념만 얼렁뚱땅 설명하고 넘어갈게요
Component
리액트하면 빼먹을 수 없는 것들 중 하나가 Component 예요
리액트의 DOM은 이 Component들을 블럭처럼 이어붙여서 만든거니까요
Index.js 안에 App Component가 들어있고 그안에 내가 만드는 Component들이 들어가는 형식인 거예요
App컴포넌트가 index.js 안에 들어가 있듯이
만약에 ABC컴포넌트를 만들어서 App 컴포넌트 안에 넣었다고 가정해봅시다.
그럼 이런식으로 생겼을 거예요
function App () {
return (
<ABC> </ABC>
}
}Component
state를 여기에 추가해볼게요
state가 뭐였나요.
react에서 리렌더링에 반응하는 변수같은 거라고 했죠
import { useState } from 'react';
function App () {
let [state, setState] = useState(0)
return (
<ABC> </ABC>
}
}state 라는 state와 setState라는 세터함수를 만들어주고
초기값 0 을 줬어요
useState 라는 HOOK (함수)의 return의 형식이 배열이고
그 배열을 구조분해할당하면 [state, setState] 이런식으로 쓰게 됩니다.
아 이런, 말이 너무 어려웠나요
쉽게 말해
- state : 리렌더링에 반응하는 변수
- setState : state를 바꿔주는 함수
정도로 생각하시면 됩니다.
근데 이 state를 ABC가 또 쓰고싶을 경우가 있어요
까다롭죠
ABC안에 state를 또 만들어 줄 순 있는데 그렇게 되면 서로 다른 변수 2개가 생겨서 하나의 값이 변하게 되었을 때 의도와 다르게 서로 다른 값을 보이게 되요
A란 사람이 B라는 사람에게 선심써서 닭다리 하나를 줬는데
B라는 사람이 뒤돌아서서 다처먹고, 먹은적 없다고 A한테 또달라고 해요
분명 닭다리 하나는 없어졌는데 A는 줬다고 하고 B는 안먹었대요
그러면 이 글을 보고있는 당신이 먹을 치킨 하나를 더 내줘야 하는 상황이 오는거예요 (?)
이게 무슨소리냐구요
말도 안되는 소리가 맞지만 잘 생각해보면 그렇게 틀린말은 아닙니다.
App이 사용하는 state와
ABC가 사용하게 될 state가 같은 값이길 바란다는 말이잖아요
치킨은 한마리기 때문에 A와 B의 말이 달라지면 안된다는 소리예요
이럴때 A가 B에게 치킨을 주는 방법이 props 입니다.
어려운 말로 하면
부모 컴포넌트가 자식 컴포넌트에게 state를 전달할 때 props를 내려준다는 말이예요
여기서 부모 컴포넌트는 App이고
자식 컴포넌트는 ABC 잖아요
그럼 App 이 ABC 한테 state를 props로 내려준다는 말이예요
직접 보세요
import { useState } from 'react';
function App () {
let [state, setState] = useState(0)
return (
<ABC props={state}> </ABC>
}
}( 여기 import 라는 문구가 있어야 사용한 문구가 있어서 작성했는 데, import는 이 글의 마지막에 설명하겠습니다 )
props={state}
state 변수를 props로 내려준다 는 말이예요
props 는 뭐냐. Properties의 줄임말입니다
Properties : 한국말로 속성들이예요
ABC의 속성처럼 들어간다는 소리예요
그럼 App은 ABC한테 치킨을 줬다고 하는데
ABC는 이 치킨을 어떻게 받냐
function ABC (props) {
return props.state;
}이런식으로 받아요
여기서 어려운 얘기 하나 더 할게요
컴포넌트는 객체입니다.
객체가 뭐예요
let Object = {
'key': value,
}키 : ‘key’
값 : ‘value’
프로퍼티 : 'key': value
여기 이 프로퍼티가
리액트 컴포넌트에서 사용되는 프로퍼티와 동일한 이야기입니다.
<ABC props={state}> </ABC>
let ABC = {
'props' : state
}쉽게 말해 이런 느낌이예요
키가 props 값이 state
프로퍼티는 'props' : state 또는 props={state} 가 되겠죠
그럼 이 값을 어떻게 불러와요
let OBJ = {
'first': 1
}
console.log(OBJ.first) // 1자 이렇게 객체의 이름과 . 을 사용해서 해당하는 값을 가져옵니다
객체 이름: OBJ
키 : 'first’
객체이름.키 = OBJ.first === 1
추가로 객체는
OBJ[first] / OBJ[’first’] 등등의 방식으로 가져오는 데
OBJ[first] 는 first 라는 변수를 찾아서 가져오는 것이고
OBJ[’first’] 는 first라는 문자열을 그대로 가져오는 것이예요
무슨 차이냐구요
let OBJ = {
'first': 1,
'메롱' : 30,
}
const first = '메롱';
console.log(OBJ.first) // 1
console.log(OBJ['first']) // 1
console.log(OBJ[first]) // 30.은 기본적으로 문자열을 가리킵니다.
그래서 .first나 [’first’]는 Object의 키 first 가 가진 값 1을 반환해요
근데 [first]는 다릅니다.
first라는 변수를 찾는다고 했죠
여기서 first라는 이름의 변수는 ‘메롱’이라는 값을 가지고 있어요
그래서 OBJ[first] 는 OBJ['메롱'] 이 되어버렸습니다.
그래서 1을 가져오려고 했는 데, 키가 메롱인 것을 찾아서 30을 가져왔어요
어쩔거에요 이거
이건 예시지만 실제로 이런 일이 발생하면 상당히 귀찮아지겠죠
그래서 변수로 쓰는게 아닌이상 왠만하면 . 으로 쓴다고 보면 편합니다.
이런 복잡한 얘기 굳이 왜 했느냐
가끔 변수로 키를 찾는 경우가 있어서 그래요
그런 경우에 어떻게 써야 하는 지 알고는 있어야 하니까
예외사항이 발생했을 때 어떻게 처리를 해야하는지, 혹은 상황에 따라 더 편하게 사용하기 위해서는 어떻게 해야하는 지도 고민을 해야하기 떄문에 어려운 내용이지만 적어보았습니다.
구조 분해할당
자 다시 리액트로 돌아와서
App컴포넌트 아래 ABC 컴포넌트가 있고
state 변수를 props로 내려준다고 했죠
이렇게요
import { useState } from 'react';
function App () {
let [state, setState] = useState(0)
return (
<ABC props={state}> </ABC>
}
}그리고 ABC는 어떻게 받는다고 했어요
function ABC (props) {
return props.state;
}네 props는 객체를 받기 때문에
let ABC = {
'props' : state
}이런 느낌이라고 말씀드렸고
그래서 props.state 이런식으로 접근하는 거예요
근데 우리의 개발자들
귀찮은거 정말 싫어합니다
props. 쓰는 거 싫어요
이거 어떻게 하면 줄일 수 있을까 또 짱구를 굴려봅니다.
똑같은 형태라면 같은 모양으로 벗겨낼수 있지 않을까
구조 분해할당이란 이런거예요
const [a, b] = [1, 2]
console.log(a) // 1
console.log(b) // 2똑같이 생겼는 데 모양만 다른 애들끼리 맞춰주는 거예요
a = 1 / b = 2 이런식으로요
객체는 그럼 어떻게 가져갈까요
let { a : a, b : b } = { a : 3, b : 4 }
console.log(a) // 3
console.log(b) // 4여기서 다르게 생긴애가 누구예요
- a키의 값 a ↔ a키의 값 3
- b키의 값 b ↔ b키의 값 4
근데 이렇게 써서 변수 a b로 만들어 줬는데 이것마저 귀찮대요
어떻게 해요 그럼
그래서 또 단축평가라는 게 나왔어요
let { a : a, b : b } // -- 1
let { a, b } // -- 2여기서 1번과 2번의 의미는 동일합니다.
1번처럼 키와 값이 동일한 모양을 하고 있을 때, 2번으로 줄여 쓸 수가 있어요
이걸 활용해서 한번 더 줄여 씁니다
// let { a : a, b : b } = { a : 3, b : 4 }
let { a. b } = { a : 3, b : 4 }
console.log(a) // 3
console.log(b) // 4구조 분해 할당 하기 전과 후를 비교해 보겠습니다.
function ABC (props) {
return props.state;
}props를 그대로 받아와서 props.을 쓰고 있어요
이렇게 매번 쓰기 귀찮던 것이 아래처럼 편해진다면?
function ABC ({ state }) {
return state;
}위의 복잡한 과정을 통해서 props.가 떨어져 나갔습니다!
이로써 우리는 Component와 state, props라는 리액트의 특징 3가지를 알게 되었습니다.
Import
마지막으로 Import 문을 볼게요
Import 는 리액트 문법이 아니라 자바스립트 문법입니다.
자 먼저 뜻부터 보고 갈게요
구글에 Import 치니 수입이래요
반대로 export 치니 내보내다래요
아래는 동사인데 위에는 왜 명사예요. 영알못이라 모르겠어요
대충 export 가 내보내다니까 반대말인 Import 를 가져오다라고 생각할게요
import 구문은 현재 스크립트 내부에 있지 않은, 외부의 ‘어떤 것’을 가져올 때 사용합니다.
그것이 CSS일 수도 있고 라이브러리일 수도 있고 또다른 스크립트일 수도 있죠
다른 ‘어떤 것’을 가져온다. 말이 맞죠?
자 이제 가져올게요
뭘가져와요? → 라이브러리 한번 가져와볼게요
import { useState } from 'react';
function App () {
let [state, setState] = useState(0)
return (
<ABC props={state}> </ABC>
}
}'react' 라는 내장 객체 안에 useState 라는 Hook 즉, 함수가 들어있대요
내장 객체가 뭐예요. 개발자가 직접 쳐서 구현하지 않아도 맘대로 편하게 가져다 쓸 수 있도록 사전에 만들어져서 저장이 되어있는 것들을 내장 객체라고 해요
실제로는 내장 함수라는 것도 있고 내장된 것들은 다양합니다.
다른것도 가져와볼게요
import DEF from './ETC'. 으로 시작하는 것들은 상대경로예요
./ 는 현재 위치 ../는 상위 폴더
./ETC는 현재위치. 즉 같은 경로상의 다른 폴더 ETC에 있는 ‘어떤 것’을 가져온대요
이 DEF가 CSS인지 JS인지 알수가 없어요
하지만 내가 CSS로 만들면 CSS를 갖고 올수 있게 되는 거고
JS로 만들면 JS를 갖고 올수 있게 되요. 뭐든 가져올 수는 있다는 소리예요
DEF 가 CSS여도 가져올 수 있고
app {
display: flex;
flex-direction: column;
}DEF가 JS여도 가져올 수가 있어요
function DEF () {
return '과자 사줘요';
}
export default DEF;근데 JS의 경우 export로 어떤 것을 내보낼지 정해줘야 해요
그래야 import할때 어떤 것을 줘야할 지 구분할 수 있어요
CSS의 경우 부분적으로 전달하는 게 아니라 전역적으로 모든 스타일을 전달해주지만
JS의 경우 내보낼 데이터를 선택해서 내보낼 수 있기 때문에
선택하는 방식에 따라 다른 데이터를 전달 받을 수 있어요
그래서 실제로 위의 구문과 같이 컴포넌트를 다른 컴포넌트의 자식으로 두기 위해서 불러오기도 합니다.
import DEF from './ETC'
function App () {
return (
<>
<ABC/>
<DEF/>
</>
)
}여기까지 Component, Props, 구조 분해할당, Import 에 대한 개념설명이였습니다.
다음에는 전에 작성하던 과자 리스트를 장바구니에 넣기 위해 이 모든 개념을 사용하겠습니다.
3줄 요약
Component 는 객체이다
자식 컴포넌트에게 전달할 떄 props로 내려준다
이때 구조분해 할당을 쓰면 편하다
