react7 (React) Hook Hook 함수형 component에서 클래스형 component의 기능을 할 수 있도록 제공하는 기능 React v16.8에 추가된 라이브러리 class component에서의 state, life cycle처럼 사용 가능 중첩되는 함수 등에서 호출을 할 수 없다 React 내에서만 Hook을 호출 해야 한다 Custom Hook에서는 호출 가능하지만 일반적인 JS 파일, 함수에서는 호출을 할 수 없다 Hook을 생성할 때에는 앞에 use를 붙여서 생성해야 한다 Hook 규칙이 적용되는지 파악 할 수 있기 때문 React Hook은 호출 되는 순서에 의존 하나의 컴포넌트에서 여러개의 Hook이 사용되는 경우 Hook은 위에서 아래로 순서대로 동작 Hook의 장점 쉽고 직관적으로 같은 기능으로 만들 수 있.. 2023. 2. 7. (React) Props & State Props 속성을 나타내는 데이터 component에서 component로 전달하는 데이터 부모 component에서 자식 component로 전달 ( 위에서 아래 component로 ) 받는 component에서는 데이터를 변경할 수 없고 최상위 부모 component에서 props를 변경할 수 있다 자식(받는) component 입장에서는 읽기 전용 // App.jsx import React from "react"; import Child from "./Child"; function App() { return ; } export default App; App componet에서 Child component로 각각 id, name의 이름으로 props를 넘겨준다 하위(자식) Component에서 pro.. 2023. 2. 6. (React) React 란? React 라이브러리 Facebook에서 제공하는 FrontEnd 라이브러리 사용자 인터페이스를 만들기 위해 사용 동적인 UI를 쉽게 제작이 가능 View를 위해서 제작 yarn 패키지 매니저를 사용한다 React에 최적화 하기 위해 Facebook에서 만든 패키지 매니저 npm 패키지 매니저가 안되진 않는다 Javascript와 HTML 문법을 js파일 하나에 함께 작성한다 JSX 파일에 작성하는 것(.jsx) JSX : Javascript + XML의 약자로 JS를 확장한 문법이라고 쉽게 말할 수 있다 .ts, .tsx는 정확하게 지켜야 하지만, .js, .jsx는 큰 상관은 없다 Component 기반 구조 React의 구조 단위를 뜻 싱글페이지 react에서 여러 부분을 component화 하여 .. 2023. 2. 6. 이전 1 2 다음
