78일차_day06 & day07

useReducer()

React에서 컴포넌트의 상태 관리를 위해서 useState를 사용해서 상태를 업데이트를 하는데,
useReducer를 사용하게 되면 컴포넌트와 상태 업데이트 로직을 분리하여 컴포넌트 외부에서도 상태 관리를 할 수 있다.
즉, 현재 컴포넌트가 아닌 다른 곳에 state를 저장하고 싶을 때 유용하게 사용할 수 있다. 

[사용법]
const [state, dispatch] = useReducer(reducer, initialState);

 

• state : 현재 상태
• dispatch : action을 발생시키는 함수
• reducer : state와 action를 받아 새로운 state를 반환하는 함수
• initialState : 초기값

 

 

Test01: useReducer (1)

 

COLOR 값 설정

 

 COLOR 값 반환

 

 

Test02: useReducer (2)

 

 

 

Test03: useReducer (3) 객체

노란색: 객체를 다루는 것이 보임.

초록색: type 변수가 CHANGE_COLOR일 경우, text 변수에 따른 값 변화 

 

결과 화면은 Test02와 동일

 

 

Test04: useReducer (4) & url

성공

 

실패

 

 

 

Test05: useReducer (5) & url

성공: 이미지 X / 이미지 O

 

실패

 

React - Router

[ 리액트는 SPA (Single Page Application) 방식 ]

SPA방식 X 

: 일반적으로 클라이언트가 요청을 하면 서버에서 요청한 페이지를 보여주기 위해 로딩되는 모습이 보인다. 

 

SPA 방식 특징

• 모든 문서를 다 읽음
• 클라이언트의 요청 시, 로딩 없이 바로 보여줌
• 속도 빠름

 

[ 특징 ]

• 기존 웹 페이지처럼 여러 개의 페이지를 사용하며 새로운 페이지를 로드 하는 기존의 MPA 방식 X
• 새로운 페이지를 로드 X, 하나의 페이지 안에서 필요한 데이터만 가져오는 형태

 

 

 

App01 : Router (1)

노란색: 메뉴

초록색: 아래 결과 화면의 url 경로 의미 >> 메뉴(노란색)에 의한 노출되는 화면

 

 

App02: Router (2)

 

 

 

 

App03: Router (3)

:{변수명}

:{변수명} 를 route path에 사용하면 useParams() 로 불러와 사용 가능
: 뒤에 나오는 부분이 params의 key 부분이 되어 :name 는 name가 key가 되어 불러오고 있다.

 

 

 

 

JSX(JavaScript XML)

React 애플리케이션에서 사용되는 JavaScript의 확장 문법으로, UI를 표현하기 위한 도구이다.
JSX를 사용하면 JavaScript 코드 내에서 HTML과 비슷한 구문을 사용하여 UI를 선언할 수 있다.

 

map()

• 배열의 각 요소를 JSX로 변환하여 새로운 배열 생성
• 데이터 배열을 JSX로 변환
• JSX를 React 컴포넌트에서 렌더링하면 화면에 원하는 결과 표시 가능

 

filter()

• 원본 배열을 필터링하여 조건을 만족하는 요소들을 포함하는 새로운 배열을 반환
• 새로운 배열은 JSX로 렌더링할 준비 X
• JSX를 생성하려면 map() 메서드 or 다른 순회 메서드를 사용하여 각 요소를 JSX로 변환해줘야 함.

 

[ 결론 ]

원본 데이터를 필터링해서 새로운 배열을 만든다고 해서 웹 페이지나 UI에 바로 결과 표시 X
JSX로 렌더링하려면 map()이나 유사한 메서드를 사용하여 각 요소를 JSX로 변환 필수!!

 

결과 화면

 

 

 

App04: Router (4)

 

App05: 숙제