자바스크립트 라이브러리 이며 유저인터페이스를 쉽게 만드는 방법을 제공, 컴포넌트로 UI를 쉽게 만들수 있다.
또한 리액트 훅을 사용해서 재사용 가능한 동작을 만들수 있고, virtual Dom으로 빠른 UI 업데이트가 가능하다.
2. JSX?
리액트 애플리케이션을 조작하는 자바스크립트 확장문법이다. 웹브라우저가 jsx를 이해할수 없어 babel이라는 컴파일러가 브라우저가 이해할 수 있도록 만들어준다.
3. 리액트컴포넌트의 데이터 전달?
Props
ContextAPI
Props
부모-> 자식로 부터 전달되는 데이터
자식컴포넌트에서 사용되고 자식 객체의 프로퍼티로 사용가능하다.
Context
context provider에 전달되는 데이터 context를 사용하는 컴포넌트에서 사용된다.
어디서나 데이터에 접근 할수 있다.
4. props와 state의 차이?
state -> 리액트 컴포넌트 안에서 읽고 업데이트가 가능한 값
propㄴ -> 리액트 컴포넌트에서 전달되고 일기만 가능한 값
state 와 props는 변경사항으로 인해 존재하는 컴포넌트가 다시 렌더링 된다는 점은 같다.
5. fragment ?
fagment 는 DOM에서 노드 없이 자식 요소나 자식 컴포넌트 그룹을 만들 수 있다.
사용이유
jsx 문법을 사용할때 반드시 최상위 태그가 있어야 한다.
table 태그를 여러 컴포넌트로 나눴을 경우 최상위 태그로 감싸줘야 하는데 이럴때 fragment를 사용한다. 또한 의미 없는 div사용 대신 사용하기도 한다.
key 값이 있는 경우 사용법
# 6. list key 사용이유?
key는 고유한 값이다. map() 함수를 사용하여 컴포넌트를 루프 할때 반드시 key prop 을 전달해야 한다.
key는 요소나 컴포넌트가 어느 리스트에 있는지 정의하기 때문이다. 리스트에 아이템을 어떤 방법으로 추가 하거나 수정해서 바꾸려고 할때 key가 없으면 순서를 알 수 가 없기 때문이다. 때문에 가상돔을 사용하여 업데이트 하기 때문에 key가 필요하다.
# 7. ref 란?
ref는 DOM 요소의 참조이다.
Ref는 useRef훅을 이용해 생성되며 바로 변수에 담을 수 있다. 그리고 이 변수는 html요소의 참조를 얻기 위해 전달 된다. 참조된 요소와 프로퍼티는 ref의 .current프로퍼티를 통해 사용 가능하다.
```jsx
import { useRef } from 'react'
function MyComponent() {
const ref = useRef();
useEffect(() => {
console.log(ref.current) // div 의 참조
}, [])
return
}
```
DOM요소와 직접적으로 사용되며 특정연산(input 태그를 포커스 하거나 클리어)가능하게 해준다.
# 8. useEffect 왜 사용?
리액트 컴포넌트에서 useEffect 훅은 사이드 이펙트(side Effect)를 위해 사용된다.
사이트 이펙트 - 외부 API 포인트로 GET, POST 요청을 보내거나 브라우저 API window.navigator , document.getElementById() 사용 하는 것
useEffect는 사이드이펙트를 수행할 수 있는 함수와 dependency 배열을 제공한다. dependency 배열에는 함수가 의존하는 값들이 들어간다.
dependency 배열의 값이 바뀌면 이펙트 함수가 다시 호출된다.
# 9. context , redux 언제 사용?
context는 prop을 활용하지 않고 애플리케이션 내에서 데이터를 사용할 수 있다. 프롭 드리링이라는 문제를 예방한다.
context는 데이터를 가져오거나 읽기만 할 뿐이고
Redux나 다른 서드파티 state library는 읽기와 업데이트가 가능하다.
context는 데이터가 업데이트 될때마다 모든 자식 컴포넌트가 다시 렌더링되고 퍼포먼스에 큰 영향을 끼친다.
# 10. useCallback , useMemo ?
`useCallback` 은 매 렌러딩마다 컴포넌트 바디안에서 선언된 함수가 재생성되는 것을 예방한다. 함수를 반환한다.
`useMemo` 무거운 연산 작업을 다시 연산 하지 않고 해당 값을 반환한다.
1. REACT란
자바스크립트 라이브러리 이며 유저인터페이스를 쉽게 만드는 방법을 제공, 컴포넌트로 UI를 쉽게 만들수 있다. 또한 리액트 훅을 사용해서 재사용 가능한 동작을 만들수 있고, virtual Dom으로 빠른 UI 업데이트가 가능하다.
2. JSX?
리액트 애플리케이션을 조작하는 자바스크립트 확장문법이다. 웹브라우저가 jsx를 이해할수 없어 babel이라는 컴파일러가 브라우저가 이해할 수 있도록 만들어준다.
3. 리액트컴포넌트의 데이터 전달?
Props
부모-> 자식로 부터 전달되는 데이터 자식컴포넌트에서 사용되고 자식 객체의 프로퍼티로 사용가능하다.
Context
context provider에 전달되는 데이터 context를 사용하는 컴포넌트에서 사용된다. 어디서나 데이터에 접근 할수 있다.
4. props와 state의 차이?
5. fragment ?
fagment 는 DOM에서 노드 없이 자식 요소나 자식 컴포넌트 그룹을 만들 수 있다. 사용이유 jsx 문법을 사용할때 반드시 최상위 태그가 있어야 한다. table 태그를 여러 컴포넌트로 나눴을 경우 최상위 태그로 감싸줘야 하는데 이럴때 fragment를 사용한다. 또한 의미 없는 div사용 대신 사용하기도 한다.
key 값이 있는 경우 사용법