Hello Hyonie World!

🚨 현재 발생하는 에러 map 함수를 사용하고 list태그를 사용할때 이와 같은 에러 발생했다. 이유는 리액트 JSX 문법에서는 요소의 리스트를 나열할 때는 고유한 key값을 줘야한다. ⭐key는 리액트가 변경, 추가, 제거 되는 항목을 식별하는데 도움이 된다. map 메소드에서 중괄호를 사용하면 반드시 return 사용 하자 📝 태그에 고유한 key 값을 주면 에러는 해결된다. move는 history 배열의 고유한 index 값으로 리스트에 하나 씩 할당 하면 된다. Key에는 고유한 값을 줘야한다. index는 비추천! *만약 이 리스트 중 중간에 삭제되거나 삽입되는 경우가 있다면 key값을 index로 주면 안되고, 실질적인 고유한 값을 줘야한다. index 도 0부터 시작해서 고유한 값을 가지지..

값의 재사용이 아니라. 로직의 재사용이 가능한 함수 useState(상태값 관리) useEffect(컴포넌트 생명주기 함수) useUser(서버에서 받아온 사용자) useMemo(메모이제이션 된 값을 반환하는 함수) useContext(값을 가져오는 함수)

웹팩, 바벨이란? 웹팩 오픈 소스 자바스크립트 모듈 번들러(여러가지 있는 것을 합쳐주는 것)이다. 즉, 여러개의 파일로 나누어져 있는 것을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다. 웹팩의 장점 - 여러 파일을 자바스크립트 코드를 압축하여 최적화할수 있기 때문에 로딩에 대한 네트워크 비용을 줄일수 있다. - 파일을 여러개로 나누고 모듈단위로 개발이 가능하고, 가독성과 유지보수가 쉽다. 바벨 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서 실행될 수 있도록 변환 시켜주는 라이브러리 * creact-react-app 을 사용하면 따로 웹팩과 바벨을 설치하지 않아도 내부적으로 설치와 설정을 전부다 해준다.

서버에서 HTML문서를 브라우저에 전달되면 브라우저가 문서에 따라서 화면을 보여준다. HTML은 DOM Tree 생성하고, CSS는 CSSOM을 생성한다. 이것들을 합쳐서 Render Tree를 만들고 레이아웃단계와 페인트 단계를 거쳐서 화면에 보여준다. ! 여기서 문제점은 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그때마다 Render Tree가 재생성된다. 즉 모든 요소들의 스타일을 다시 계산함 (레이아웃 -> 리페인트 과정 다시 반복) 작은 변화로 인해 불필요하게 DOM 조작하는 비용이 크게 된다 이러한 문제로 인해 Virtual DOM이 나왔다. 가상 돔은 실제 돔을 메모리에 복사해 준 것으로 생각하면 됨 데이터가 바뀌면 가상돔에 렌더링 되고, 이전 가상돔과 비교해서 바뀐 부분만 실제 돔에 적..

리액트 컴포넌트를 이용해서 웹이나 앱을 개발한다. 컴포넌트는 리액트로 만들어진 앱을 이루는 최소한의 단위이다. 리액트 컴포넌트 2가지로 나뉘어진다. - 클래스형 컴포넌트 - 함수형 컴포넌트 리액트 훅이 나온뒤로는 주로 함수형 컴포넌트를 이용해서 개발을 한다.

- 상대적으로 배우기 쉬운 라이브러리 - 여러 기능들을 위해 잘 구성된 라이브러리 환경 (라우팅, 상태관리, 테스트) - 많은 기업들이 사용함으로써 잘 검증된 라이브러리(페이스북, 인스타그램) 🛠재사용성 React의 컴포넌트를 활용해 독립적, 재사용가능한 개발 가능 🌐가상돔 React의 가상돔으로 브라우저 내 발생하는 연산을 줄여 성능 개선 🔜단방향 데이터 흐름 React는 오직 부모에서 자식으로만 데이터가 흐름. (자식이 부모 구성요소 영향 X)

사용자 인터페이스를 만들기위한 자바스크립트 라이브러리이다. 리액트는 인터렉션이 많은 웹, 앱을 개발하기 위해 주로 사용된다. 리액트는 뷰, 앵귤러와 많이 비교가 되며, 보통 이 3가지를 비교하여 화면을 개발하게 된다. 여기서 리액트는 라이브러리인 것을 알았고, 뷰.js, 앵귤러는 프레임워크이다. 라이브러리? 프레임워크? 라이브러리: 어떠한 특정 기능을 모듈화한 것 프레임워크: 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는것 다양한 라이브러리를 구성하여 프레임워크를 구성하게 된다. 라이브러리는 특정 기능에 모듈화 되어 있다. - 테스트를 위한 라이브러리 - 페이지 이동을 위한 라이브러리 - 상태관리를 위한 라이브러리 등.. 리액트가 라이브러리인 이유는 MVC 패턴에서 오로지 화면만 담당하는 것..

state란? state는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다. state가 변경되고 재렌더링이 필요한 경우 리액트에서 변경된 부분을 자동으로 계산해서 렌더링한다. state 선언 기본적으로 useState를 사용하기 위해서는 react패키지로 부터 useState를 import한다. import React,{useState} from 'react'; const App = () => { const [value, setValue] = useState(초기값); return ... } - state값을 직접 변경하지 ❌ 스테이트 값을 직접적으로 변경하면 리액트에서 변경된 부분을 알아차리지 못한다. state 값을 변경하고 싶을 때는 반드시 setState 함수를 사용해한다..

프롭스란? 프롭스는 컴포넌트에 값을 넘겨줄때 사용한다. (부모 Element 에서 자식 Element 로 데이터를 전달) 넘겨줄수 있는 값은 변수, 함수, 객체, 배열, 자바스크립트 요소라면 제한이 없다. 주로 컴포넌트의 재사용을 위해서 사용한다. 예시1 - props를 활용한 컴포넌트 컴포넌트를 선언할 때, 구조분해 할당을 활용하여 더 간결하게 props를 받아 올수 있다. const Welcom = (props) => { const {a, b, c} = props; return {a} } 예시2 - Object 로 전달받는 props 예시 1번을 더 간결하게 작성하려면 애초에 매개변수를 받는 시점에 props값을 받아 올수 있다. const Welcom = ({a, b, c}) => { return ..