React
1.[React #1] React의 등장과 내 컴퓨터에 저장❤️
리엑트는 3세대 웹의 등장으로 웹의 규모가 커지고 복잡해지면서 웹 페이지를 효율적으로 만들고 관리하기 위해 만들어진 라이브러리다. 유저 인터렉션이 많아져 UI 변화가 많아진다. dom, event 만으로는 조작이 힘들어짐 => 새로운 기술의 필요 Web Applic
2.[React #2] HTML + JavaScript == JSX
JSX syntax extension for JavaScript 자바스크립트 확정바전 React.js를 사용하기 위해 JSX 문법이 포함되어 있다면, 해당 파일을 정규 자바스크립트 문법으로 변환시키는 컴파일 과정이 필요하다. 장점: html 태그를 그대로 사용하기 떄
3.[React #3] React Component 혁명
Component 재사용 가능한 각각의 독립된 모듈 (프로그래밍적 정의) 특징 FE는 ui 만들엉 UI 단위 코드 재활용 증가, 유지보수 용이 해당 페이지가 어떻게 구성되어있는지 파악 용이 컴포넌트는 다른 컴포넌트를 포함한다(부모 컴포- 자식 컴포 = 레고블럭) (부분
4.[React #4] React 만능키 {props} & Event handler
React Component들이 서로 연결되고 반응하기 위해서는 하나의 component 값들을 다른 component로 보내주어야 한다. 하나의 컴포넌트에서 다른 컴포넌트로 넘겨주는 값, 정보(information)를 "props"라고 한다. Props propert
5.[React #5] React 상태 관리 {state}
휴대폰을 예로 들어보자.props는 사용자가 화면에서 보는 UI를 조작하는 장치이며,state는 제품을 열었을 때 내부적 조작 장치 매커니즘이라고 할 수 있다. 출처: 생활코딩즉, props는 컴포넌트를 사용할 때 사용자에게 중요한 외부적 정보이며, state는 pr
6.[React #6] .map()만 잘써도 React 좀 한다지(feat. key)
자바스크립트 배열 메서드인.map() 함수는 React에서도 코드를 효율적으로 구성하는 데 유용하게 사용할 수 있다.반복되는 컴포넌트를 렌더링하기 위해 자바스크립트의 내장 함수인 map()을 사용한다.map() 함수는 파라미터로 전달된 함수를 사용해, 배열 각 요소를
7.[React #7] Component Lifecycle(생애주기) Methods
Component Lifecycle React components는 create, render, DOM에 추가, 업데이트, 삭제될 수 있다. 이 스텝들이 컴포넌트의 생명주기(lifecycle)라고 한다. Mounting : 컴포넌트가 초기화되고 DOM에 놓이는 첫 순
8.[React #8] React-Router로 SPA 구현하기
SPA SPA(Single Page Application)은 페이지가 한개인 어플리케이션을 뜻한다. HTML에서는 페이지 수만큼 HTML 파일이 존재하지만, React에서 .html 파일의 개수는 1개다. 즉, React는 SPA 기반으로 작동된다. 한 웹페이지 안에서
9.[React #9] styled-components로 효과적인 스타일링
현대 앱이 컴포넌트를 기반으로 발전해가면서 CSS 스타일링 방법론 또한 '컴포넌트를 기반'으로 재구성되고 있다. 이러한 발전 속에서 등장한 패러다임이 'CSS-in-JS'이며 그 중 가장 인기있는 라이브러리가 'sytled-components'이다. CSS in JS
10.[React #10] React Hooks로 함수형, state 효율적으로 쓰기(feat.useState())
Hooks 개발 배경 React의 Class형 컴포넌트로 모든 프로그래밍을 하던 시절, 개발자들은 React팀에 다음과 같은 feedback을 던진다. "Class형은 컴포넌트 간 재사용하기 어려워요!" "Class형은 복잡하고 테스트하는데 시간을 많이 잡아먹어요!"
11.[React #11] Array, Object in State
item 클릭 시 cart에 담기고, 담긴 item 클릭시 삭제연관된 변수의 묶음은 객체로 처리한다.
12.[React #12] The Effect Hook (feat.useEffect())
웹 사이트를 만들다 보면 화면에 보일 수 있는 데이터를 서버에서 받아오기도 해야 하고, state가 바뀔 때마다 함수를 실행시키거나, 이벤트 리스너를 달았다가 해제하는 등의 동작이 필요할 수 있다. useEffect hook은 바로 이럴 때 유용하게 쓸 수 있다. H
13.[React #13] 동적 라우팅과 Path Parameter, 그리고 관련 Hooks
라우팅을 위한 기본 코드 구조 index.html : public/index.html에 위치하며 React 페이지 로드 시 가장 먼저 호출되는 영역 index.js : React 앱을 렌더하고 index.html의 div#root 이하에 끼워넣는 역할 Router.j
14.[React #14] 페이지네이션과 Query Parameter
Pagination 백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야 한다. (ex: 게시판의 "이전/다음 페이지"를 끊어 보여주는 기능) 프론트엔드에서
15.[React #15] 관심사의 분리(Separation of Concerns, SoC)와 Custom Hook
Separation of Concerns 하나의 함수, 변수, 클래스, 컴포넌트에게 한번에 너무 많은 일(걱정)을 부여하게 되면 그 코드를 읽는 사람은 쉽게 혼란에 빠지게 됩니다. 가장 간단한 해결책은 한번에 한 가지 걱정만 하도록 단위를 잘게 나누는 겁니다. 바꿔 말