불변성 관리
불변성(Immutability)이란?
- 데이터가 생성된 후에 수정되지 않는 성질을 의미해요.
리액트와 불변성 유지
리액트에서 상태를 변경할 때에는 항상 새로운 객체나 배열을 생성하여 상태를 업데이트해야 해요.
리액트는 상태의 불변성을 유지함으로써 이전 상태와 새 상태를 효과적으로 비교해요.
배열 상태의 불변성 관리
추가: 새 요소를 배열에 추가할 때는 스프레드 연산자(...)를 사용해 기존 배열을 복사하고 새 요소를 추가해요.
const [items, setItems] = useState(['사과', '바나나']);
const addItem = (item) => {
setItems([...items, item]);
};제거: 특정 요소를 제거할 때는 filter 함수를 사용해 해당 요소를 제외한 새 배열을 생성해요.
const [items, setItems] = useState(['사과', '바나나']);
const removeItem = (targetItem) => {
setItems(items.filter(item => item !== targetItem));
};수정: 특정 요소를 수정할 때는 map 함수를 사용해 해당 요소만 업데이트된 새 배열을 생성해요.
const [items, setItems] = useState(['사과', '바나나']);
const updateItem = (targetItem, newItem) => {
setItems(items.map(item => item === targetItem ? newItem : item));
}; 객체 상태의 불변성 관리
객체의 속성을 업데이트할 때는 객체 전개 연산자({...})를 사용해 객체를 복사하고, 특정 필드를 업데이트해요.
const [user, setUser] = useState({ name: '지수', age: 20 });
const updateUser = (newValues) => {
setUser({ ...user, ...newValues });
};
Routing 구현과 전역 상태 관리 입문
- 갈곳을 지정해주는
https://reactrouter.com/en/main/router-components/browser-router
- 브라우저 라우터 사용
flux 아키텍쳐
-
단방향으로 밀어주는 흐름
-
Redux => store 라고 불리는 외부 저장소를 만들어두고, 필요한 모든 데이터를 여기에 저장하기.
-
recoil
-
context 끼리 나눠서 저장소를 만들기
Context API
1.만든다
2. 사용한다
3. provider 작업을 해준다
리액트 지금까지 배운거 다시 정리
state 왜 쓰지?
바뀐 값도 볼 수 있게 해줘
input 할때 let 쓰면 안바뀌어. State 로 관리하면 렌더링 계속 되면서 바뀜.
Props ?
- State 를 왔다갔다 할 수 있게 해주는.
근데 너무 번거로워 Props 는 => 전역으로 관리하는 저장소가 필요해! (Context!)
Context
- 컨텍스트는 Provider 를 사용해.
- Provider 안에 있는 범위에서만 사용해.
- 로그인이 안된사람은
profile Provider 이 auth provider 위에 있어야.
auth 의 것을 쓸 수 있어.
<auth Project> 안에
<Profile>
isSignIn()
const signIn = () => setIsLoggedIn(true);- 얜 true/false 만 있어서 이렇게 써도돼.
setNickname 그냥 전달해줘도돼.
setNickName ()
const setNickname = (newNickName) => {
setProfile({ ...profile, nickname: newNickName });
};or Profile wjscp rorcpfmf rhksflgkrpTek gkaus,
state 에 있는
- 객체는 스프레드 연산자로 변경해야해. ...user,nickname:newNickName 으로 해야해.
https://instructor-young.notion.site/Routing-0638d5e109fc46feae7726506ee6660d
취업
일단 기업
- 설인
- 웅진
- 사람인
인재상
- 기획자형 개발자
- 왜 진행했고, 남을 설득시킬 수 있는. 왜 필요해서 개발했는지
- 내가 프로젝트에서 무슨 역할 했는지(자세하게)
이력서 포폴
- 프로젝트 진행시 자기 경험 및 생각 표현
- 팀프로젝트 진행시 개인의 역할 및 역량 상세 기입
- 자신만의 기술 습득 및 해당 스택을 통한 개발 이력이 중요
- 포트폴리오 내 기입된 프로젝트를 자신이 상세히 설명할 수 있어야함
프로젝트
- 상용화 전단계 까지를 목표
- 팀프로젝트 진행시 개인의 역할 및 역량 상세히 발표
- 개인 프로젝트 진행 내역도 필요(기간동안 진행한 과제들)
