함수형에 대한 정리를 먼저 해야했지만, 아직 완전히 내것으로 하지 못하여 시간이 오래걸릴 것 같다.
함수형은 일단 넘기고, 다음 것부터 해나가는게 맞다고 생각한다.
막힌 부분에 메달려있다간 그 자리에 멈춰설 것만 같다.
1. 선언형 프로그래밍
프로그램이 "무엇"을 원하는 지에 무게를 둠
특징 : 가독성 간결성 확장성
vs 명령형 프로그래밍
프로그램의 처리 "방법"에 무게를 둠
코드 예시(1)
명령형 프로그래밍
const double = (arr) => {
let results = [];
for (let i = 0; i < arr.length; i++) {
results.push(arr[i] * 2);
}
return results;
};선언형 프로그래밍
const double = (arr) => {
return arr.map((n) => n * 2);
};당장 예시를 보더라도 선언형 프로그래밍이 훨씬 짧다는 것을 알 수있다.
또한 array.map() 메서드를 안다는 전제 하에,
n*2의 배열을 리턴하는 간결한 프로세스로 해당 함수가 어떤 결과를 리턴하는 지 명확하다.
명령형의 경우, 반복문 내부 프로세스를 전부 읽고 리턴하는 값도 확인해야하기 때문에 상대적으로 함수의 목표가 불명확하다.
코드예시(2)
function ToggleButton({ $target, text, onClick }) {
const $button = document.createElement("button");
$target.appendChild($button);
this.state = {
...
};
this.setState = (nextState) => {
...
};
this.render = () => {
...
};
$button.addEventListener("click", () => {
...
});
this.render();
}
// 토글 버튼 생성
new ToggleButton({
$target: $toggleBtn,
text: "토글 버튼",
});function, class 키워드 등으로 비슷한 기능을 묶고, 독립적으로 활용이 가능하며 기능을 확장하기도 용이하다.
2. 컴포넌트 방식
UI를 선언적으로 표현하기 위해, 표현하는 부분을 추상화하는 방법
컴포넌트 예시
To do list 기능 = Header + TodoForm + TodoList + App
컴포넌트 간의 값을 활용하는 법?
컴포넌트 생성 파라미터에 이벤트 콜백을 넣고, 파라미터를 입력 받으면 해당 콜백을 통해 값을 넘겨준다.
예시
// 현재 위치 : "./App.js"
new TodoForm({
$target,
onSubmit: (text) => {
const nextState = [...todoList.state, { text }];
todoList.setState(nextState);
},
});
const todoList = new TodoList({
$target,
initialState,
});./App.js에서 각각 다른 경로에 존재하는 TodoForm(), TodoList() 함수를 호출한다.
TodoForm()에서 onSubmit을 통해 파라미터 text를 사용하긴 하지만, TodoList()와 직접적인 의존관계는 없는 독립적인 형태로 데이터를 공유한다.
3. Local Storage
브라우저의 기능으로, 키-밸류 기반의 데이터 저장소.
도메인 기반으로 데이터를 저장한다.
직접적으로 데이터를 삭제하거나, local storage를 초기화하지 않는 한 데이터가 유지된다.
메서드
localStorage.setItem(“키”, “밸류”) //저장
localStorage.getItem(“키”) //읽기
localStorage.removeItem(“키”) //삭제
localStorage.clear() //초기화
주의 : Local Storage의 값으로는
string타입만 넣을 수 있으므로,JSON은stringfy,parse가 필요하다localStorage.setItem(“키”, JSON.stringfy(밸류) //저장
JSON.parse(localStorage.getItem(“키”) //읽기
vs Session Storage
Local Storage와 매우 유사하지만, 브라우저 종료 시 데이터가 초기화된다.
전 주에 배웠던 함수형과 선언형만 들었을 때는 '왜 이걸 굳이...' 라는 생각을 했었다.
하지만 컴포넌트 방식을 통해 '아 이래서 필요하구나~!' 라고 이해가 파박 되었다.
강사님이 "컴포넌트 방식에 익숙해지면 Vue, React는 별 거 아닙니다~"라고 하셨는데 정말 그럴 것 같다는 확신이 들었다.
이전에 혼자서 리액트 책 하나 사놓고 무작정 따라하면서 공부를 했었는데,
책에서는 기능별로 나눠서 코딩하라고만 할 뿐 왜 그런지에 대한 얘기는 없었기에 답답하기 그지 없었다.
'명령형도 충분히 괜찮은 거 같은데, 리액트는 원래 이렇게 만들어져서 그런가...?'
라는 납득 아닌 납득을 한 채로 공부를 했었고,
그렇기 때문인지 소화불량으로 리액트 책을 완주하지 못했었다.
하지만 이렇게 컴포넌트 형식으로 먼저 준비운동을 한다면, 다음에 배울 Vue와 React에서도 큰 도움이 될 거라는 생각에 함수형에 넝마가 되었던 의지가 다시 살아나는 것 같다.
