[데브코스] React 기초 핵심 정리(state, 구조 분해 할당, 컴포넌트 반복)
·
🕊️프로그래머스 데브코스/TIL
React는 상태 기반 UI 라이브러리라고 부를 수 있을 만큼 state(상태)가 중심이 되는 구조다. 오늘은 React 앱을 구성할 때 가장 기본이자 본질적인 다음 네 가지 주제를 기반으로 리액트 기초 핵심과 컴포넌트 구현을 알아보려고 한다.useState로 상태 만들기구조 분해 할당으로 props와 state 깔끔하게 처리하기배열 데이터 반복 처리(map)setInterval을 활용한 실시간 시계 구현🦝StateReact에서 상태의 개념React의 기본 철학은 UI는 상태에 따라 자동으로 갱신되어야 한다는 것이다. 여기서 상태(state)란 다음 조건을 만족하는 데이터를 말한다.사용자 입력, 네트워크 응답, 시간 흐름 등에 따라 변화 가능변경될 때마다 화면(UI)를 자동으로 다시 렌더링해야 하는 값..
[데브코스] Express URL 핸들링 (req.query(), 비구조화, Map)
·
🕊️프로그래머스 데브코스/TIL
이전 시간에 Express에서 req.params()를 활용해서 URL에서 정보를 추출하고, 이를 서버 응답에 활용하는 방법을 배웠다. 오늘은 URL에서 정보를 추출하는 새로운 방법을 배우고, 비구조화를 사용해서 코드를 간단하게 하는법과 Map 자료구조를 Express에 적용하는 방법을 배웠다.💉URL에서 정보 추출하기req.queryURL의 쿼리 스트링, ? 뒤에 붙는 key=value 쌍app.get("/watch", function (req, res) { const q = req.query; console.log(q); res.json(q);});app.listen(3001);클라이언트 요청이 http://localhost:3001/watch?v=abc123&t=42 형식으로 들어온다면,콘솔..