[React] 6. 블로그 만들기 전 준비 (2)

김주희

Aug 20, 2025

Contents

1. 디자인 적용해보기?2. 다시 상태관리로 돌아와서 useEffect 3. useNavigate

styled-components: Basics

Get Started with styled-components basics.

https://styled-components.com/docs/basics#getting-started

디자인을 동적으로 만들 수 있다.

그냥 두 개 만들어도 된다.

1. 디자인 적용해보기?

1.

2. ssar이면 파란색 아니면 빨간색

style props passing…?

그냥 중괄호를 쓰면 js인줄 알고 잡아채니까 ${}를 쓴다.

백틱 안에 ${}

jsp에서는 ${}를 쓰는데 이거랑 맨날 충돌남..?

이렇게 두 개 만들ㅇㅓ서 써도 되긴 함!

2. 다시 상태관리로 돌아와서 useEffect

컴포넌트가 만들어질 때 최초에 실행

initializable 해주는 생성자 같은 애

통신해서 데이터 받아서 최초에 그림을 받는거

상태가 바뀐다고 무조건 통신할 필요 없으니까 그때 []로 다시 받을지 정의

다른 페이지 갔다가 소개로 들어가야 userEffect가 실행됨

넘버를 증가시킬때는 실행 안되낟가 카운트 증가시킬때는 실행됨

다운받은 데이터 상태로 관리해야됨

stack에 쌓여있지는 않지만 history라는 객체가 가지고 있어서 뒤로가기 가능함

~?하면 메모리 누수 발생

내가 new하면 object가 뜨는데 선풍기가 필요해서 들고옴 선풍기는 새로운 new 오브젝트

바람 잘 쐬고 있다가 내가 사라지면 선풍기 사라져? 아니 선풍기는 계속 돌아감

내가 사라지면 선풍기도 사라져야됨 의존, 결합하고 있기 때문

java, js는 managed language라서 heap을 garbage collection에 의해 관리 → 객체는 내가 직접 잡아ㅓ 죽일 수 없음

일반 오브젝트는 누수 잘 발생 안하는데 백그라운드에서 돌아가는 애들은 close가 있어서 garbage collection에게 맡기기에는 자원소모가 커서 직접 닫는게 잇음

3. useNavigate

라우터 이용하지 않고 직접 이동하고 싶을때가 있음

pathVariable과 queryString 전달하면서 페이지 이동하는 방법

body 데이터는 props로 날리면 됨

메뉴에 있으면 navigate 안만들어도 되는데

useParams

구조분해할당 = object 안의 필드 꺼내준다는것

useSearchParams

쿼리 스트링 따주는애

useDispatch 글로벌 상태 관리

화면마다 useState로 상태를 가지고 있는데

flutter는 useState는 ui의 상태를 관리하는거고 리버팟은 밖으로 뺐잖아

전역적인 상태관리 = useDispatch

⇒ 이건 블로그 만들면서 해보자.

자바스크립트의 구조분해할당과 배열 비구조화할당은 배열이나 객체의 속성을 분해해서 개별 변수에 담을 수 있게 해주는 편리한 문법입니다. 둘은 같은 개념을 다른 대상(객체 vs. 배열)에 적용한 것이므로, 보통 '구조분해할당'이라는 용어로 통합해서 부릅니다.

객체 구조분해할당 예제

객체 구조분해할당은 객체의 속성(property)을 변수로 쉽게 추출할 수 있게 해줍니다. 변수 이름은 객체의 속성 이름과 일치해야 합니다.

배열 비구조화할당 예제

배열 비구조화할당은 배열의 요소를 순서대로 변수에 할당합니다. 배열의 인덱스를 이용하는 대신, 변수 순서로 값을 가져옵니다.


// 1. 객체 구조 분해 할당 예제

const person = {
  name: '홍길동',
  age: 30,
  city: '서울',
  skills: ['JavaScript', 'React', 'Node.js']
};

// 기본 구조 분해 할당
const { name, age } = person;
console.log(`이름: ${name}, 나이: ${age}`); // 출력: 이름: 홍길동, 나이: 30

// 변수 별칭을 사용한 구조 분해 할당
const { city: location } = person;
console.log(`사는 곳: ${location}`); // 출력: 사는 곳: 서울

// 존재하지 않는 속성에 기본값 설정
const { job = '프리랜서' } = person;
console.log(`직업: ${job}`); // 출력: 직업: 프리랜서 (job 속성이 없으므로 기본값 사용)

console.log('---------------------------');

// 2. 배열 비구조화 할당 예제

const fruits = ['사과', '바나나', '포도'];

// 기본 비구조화 할당 (순서대로 변수 할당)
const [fruit1, fruit2, fruit3] = fruits;
console.log(`첫 번째 과일: ${fruit1}`); // 출력: 첫 번째 과일: 사과
console.log(`두 번째 과일: ${fruit2}`); // 출력: 두 번째 과일: 바나나

// 일부 요소 건너뛰기
const [first, , last] = fruits;
console.log(`첫 번째와 마지막 과일: ${first}, ${last}`); // 출력: 첫 번째와 마지막 과일: 사과, 포도

// 나머지 요소들을 새로운 배열로 할당 (스프레드 연산자)
const [mainFruit, ...otherFruits] = ['사과', '바나나', '포도', '딸기'];
console.log(`주요 과일: ${mainFruit}`);    // 출력: 주요 과일: 사과
console.log(`나머지 과일: ${otherFruits}`); // 출력: 나머지 과일: 바나나,포도,딸기

console.log('---------------------------');

// 3. 중첩된 구조 분해 할당 예제 (배열과 객체 혼합)

const userProfile = {
  id: 1,
  data: {
    username: 'john_doe',
    email: 'john@example.com',
    preferences: ['dark-mode', 'notifications']
  }
};

const {
  id,
  data: { 
    username, 
    email,
    preferences: [firstPref, ...restPrefs] // 객체 내의 배열 비구조화
  }
} = userProfile;

console.log(`유저 ID: ${id}`);                // 출력: 유저 ID: 1
console.log(`사용자 이름: ${username}`);       // 출력: 사용자 이름: john_doe
console.log(`이메일: ${email}`);               // 출력: 이메일: john@example.com
console.log(`첫 번째 선호사항: ${firstPref}`); // 출력: 첫 번째 선호사항: dark-mode
console.log(`나머지 선호사항: ${restPrefs}`);   // 출력: 나머지 선호사항: notifications