# export, import, export default
자바스크립트 모듈 시스템에서 export, import는 모듈 간의 기능을 공유하기 위해 사용되는 키워드
export
현재 모듈에서 정의된 함수, 객체, 값 등을 다른 자바스크립트 파일에서 사용할수 있도록 공개함
>> 퍼가셍~
import
다른 자바스크립트 파일에서 export된 기능을 가져오기 위해 사용
>> 퍼가요~
export default
모듈당 하나만 가능한 기본 내보내기
디폴트로 내보낸 값은 {중괄호} 없이 임폴트할 수 있음
>> 딴데서 나 써도 댕
# 아이템 추가 및 삭제
아이템을 추가하기 위해서는
기존 배열을 변경하는 것이 아니라
새로운 배열을 생성하고 이를 State로 관리해야 함
>> 그냥 아예 새로운거 집어넣어버림
const [item, setItems] = useState(['Apple', 'Banana', 'Kiwi']);
/* 추가 */
const addItem = () => {
const newItem = prompt('Enter a new item: ');
if (newItem) {
setItems([...items, newItem]);
}
};
/* 삭제 */
const removeItem = (index) => {
const updateItem = items.filter((_, i) => !== index);
setItems(updateItem);
};
setItem([...items, newItem]); <<< 이건 이대로 쓰는걸로 약속된 표현
생명주기
마운팅 :
Mounting
컴포넌트에서 인스턴스가 생성되어 DOM에 삽입될 때
메서드들이 차례로 실행되는 것, 그 과정
- constructor() :
컴포넌트가 마운트 되기 전에 호출됨
초기 state 를 정의 · 설정 할 수 있음
- static getDerivedStateFromProps() :
props을 받아 state를 업데이트 할 때 사용
- render() :
컴포넌트 UI를 랜더링함
-componentDidMount :
컴포넌트가 마운트 된 직후( = DOM에 삽입된 직후)
업데이팅 :
Updating
props나 state가 변경되면 업데이팅이 발생하고 메서드들이 차례로 실행됨
- static getDerivedStateFromProps()
- shouldComponentUpdate() :
props나 state를 변경 시 리랜더링 전에 호출됨
- getSnapshotBeforeUpdate() :
render의 결과가 DOM에 반영되기 직전에 호출됨
- componentDidUpdate() :
업데이트 직후에 실행됨
이전 props와 state를 호출
언마운팅 :
Unmounting
컴포넌트가 DOM에서 제거될 때 메서드가 실행됨
- componentWillUnmount()
Fragment
React에서 여러 요소를 감싸주기 위해 사용되는 특별한 컴포넌트
Fragment를 사용하면 추가적인 DOM노드를 생성하지 않고도 여러 요소를 그룹화 할 수 있음
일반적으로 JSX 코드에서는 컴포넌트에는 하나의 최상위 요소만이 존재해야함
컴포넌트 단위로 element를 return할 때
하나의 <html> 태그로 전체를 감싸지 않으면 에러가 발생함
>> 바깥에 굳이 div 억지로 감싸줬던거
Fragment를 사용하면 요소들을 그룹화해줄 수 있음
Fragment는 아무런 출력을 하지 않고 자식 요소들을 그룹화하는 역할만 수행함
작성 방법 :
Fragment <> </>
>> 안에가 비어있음
혹은
<React.Fragment> </React.Fragment>
/* 에러코드1 */
class Ex extends Component {
render() {
return(
<p> 하이용 </p>
<button> 눌려바용 </button>
)
}
}
/* 에러코드2 */
class Ex extends Component {
render() {
return(
<div>
<p> 하이용 </p>
<button> 눌려바용 </button>
</div>
<div>
<p> 빠이용 </p>
<button> 누르지마용 </button>
</div>
)
}
}
/* 에러 안나는 코드 */
class Ex extends Component {
render() {
return(
<>
<>
<p> 하이용 </p>
<button> 눌려바용 </button>
</>
<>
<p> 빠이용 </p>
<button> 누르지마용 </button>
</>
</>
)
}
}
Context API
= 상태관리 라이브러리
React 내장 기능
복잡한 어플리케이션에서 여러 컴포넌트 간의 상태를 공유하기 위해 사용
전역적으로 데이터를 공유할 수 있게 해주는 기능
주로 어플리케이션 전체나 일부 컴포넌트 트리에 공유해야하는 데이터에 사용
>> 로그인 했다안했다, 테마바꾸면 전체바뀌고
Context API를 사용하면
중간단계의 컴포넌트들을 거치지 않고
컴포넌트 트리 아래의 모든 컴포넌트들이 값을 공유할 수 있음
const MyContext = React.createContext(defaultValue);
/* Provider 컴포넌트를 사용하여 하위 컴포넌트들에게 현재 text값 전달 */
<MyContext.Provider value={}>
/* 하위 컴포넌트에서는
MyContext.Consumer를 사용하여 context 값을 소비하거나,
useContext() Hook을 사용하여 함수형 컴포넌트 내에서 직접 접근할 수 있음 */
Redux
= 상태관리 오픈소스 라이브러리
어플리케이션의 상태를 저장하는 중앙 집중식 저장소(store)개념을 제공하며
상태 변경은 action, reducer 등을 통해 관리함
react-redux 라는 별도의 라이브러리가 함께 자주 사용됨
Redux Store과 React 컴포넌트 사이의 연결을 도와줌
단 Redux는 큰 큐모와 복잡한 상태관리가 필요한 프로젝트에서 주로 사용됨
'FrontEnd > React' 카테고리의 다른 글
| [React] 헷깔리는 것 정리 (0) | 2023.09.13 |
|---|---|
| [React] 간단실습.01 (로그인, 할일목록, 로또, 바꾸기) (0) | 2023.09.11 |
| [React] 02 (0) | 2023.09.11 |
| [React] 01 (0) | 2023.09.11 |
| [React] React 시작하기 (0) | 2023.09.08 |
