끄적끄적 코딩

props란 컴포넌트 속성을 설정 할 때 사용하는 요소 부모 컴포넌트에서 자식 컴포넌트로 props를 전달 가능 properties의 줄임말 (속성) // App.js import React from "react"; import ChildrenComponent from "./ChildrenComponent"; const App = () => { return ; }; export default App; // ChildrenComponent.jsx import React from "react"; const ChildrenComponent = (props) => { return name : {props.name}; }; export default ChildrenComponent; -- 결과값 -- defaul..

React Native란? (리액트 네이티브) React의 방식으로 동시에 iOS와 Android 모바일 애플리케이션 개발을 할 수있는 페이스 북의 오픈 소스 프레임 워크 *bridge : IOS, Android 네이티브 코드에 접근할 수 있는 일종의 다리 역할을 수행 1. 직접 작성하는 리액트 코드(리액트 웹 코드와 매우 흡사한) 파트 2. 작성한 코드가 시스템에서 해석된 자바스크립트 파트 3. “브릿지"라고 불리는 요소들의 집합 파트 4. 네이티브 파트

일반적인 Lifecycle *mount : 컴포넌트가 처음 실행되는시기를 의미합니다. Mounting - 컴포넌트가 실행되고 constructor이 가장먼저 실행됨 - render가 되고 DOM과 refs가 업데이트됨 - componentDidMount가 실행됨 Updating - New props, setState, forceUpdate()가 실행됨 - render가 되고 DOM과 refs가 업데이트됨 - componentDidUpdate가 실행됨 Unmounting - componentWillUnmount가 실행됨 React Hook Lifecycle Mounting 함수가 실행되면 결과를 반환합니다. (만약 useMemo로 되어있는 함수라면 내부에서 발생하는 연산을 최적화합니다.) DOM과 refs..

useState 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줌 useEffect - 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook useContext - 함수형 컴포넌트에서 Context 를 보다 더 쉽게 사용 할 수 있음 useReducer - useState 보다 컴포넌트에서 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 Hook useMemo - 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 useCallback - 렌더링 성능을 최적화 useRef - 함수형 컴포넌트에서 ref 를 쉽게 사용 할 수 있게 해줌

클래스형 컴포넌트, 함수형 컴포넌트 비교 선언 방식 함수형 컴포넌트가 선언이 더 편함 class component - class 키워드 필요 - Component로 상속을 받아야함 - render() 메소드가 필요 일반적인 차이 - 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용 (함수형 컴포넌트는 훅스로 해결) - 함수형 컴포넌트는 메모리 자원을 덜 사용한다는 장점 - state선언 방식, props를 가져오는 방식, event handling을 하는 방식이 조금씩 다름 *props : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용 *hook : 함수컴포넌트에서 클래스 구성 요소처럼 및 를 사용할 수 있도록하는 함수 주요 hook : useState, useEffec..

웹팩이란 - Module bundler 라이브러리 *Module bundler : 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리 웹페이지에서는 페이지를 보여주기 위한 수 많은 자바스크립트 파일을 서버에 요청 - 서버와 여러번 통신 - 비효율 => 여러개의 파일들을 Module bundler로 한번에 처리해서 위의 문제를 해결 Babel이란 - 최신 문법을 특정 이전 버전의 js로 변환하는 도구 Create React App이란 - Facebook의 공식 React 웹 개발을위한 보일러 플레이트 * 보일러 플레이트 : 변형이 거의 또는 전혀없이 여러 위치에서 반복되는 코드 섹션 - 모든 개발환경을 설정하지 않아도 되고 페이스북에서 지속적으로 업데이트를 해주기에 많은 사람들이 사용 - ..

레딧 : https://www.reddit.com/r/reactjs/ /r/ReactJS - The Front Page of React • r/reactjs A community for learning and developing web applications using React by Facebook. www.reddit.com Hsahnode : https://hashnode.com/n/reactjs #reactjs on Hashnode React (40878 followers · 5936 posts) - React is a JavaScript library for building user interfaces. hashnode.com stack overflow : https://stackoverflow..

단방향 데이터 바인딩 - 처음 모델이 가진 값을 뷰에 표현하고 나중에 모델이 변경되더라도 업데이트 되지 않음 양방향 데이터 바인딩 - 모델을 뷰에 바인딩함과 동시에 이후 모델이 변경되는 경우를 감지하여 지속적으로 뷰를 업데이트 해줌 * 데이터 바인딩 : 화면에 보이는 데이터와 브라우저 메모리에있는 데이터를 일치시키는 방법 차이 - HTML에서 변경된 내용이 데이터 영향을 미치는가 리액트 - React와 같은 단방향 데이터 바인딩은 Javascript -> HTML로 데이터 바인딩만 가능 이벤트를 통해 다시 화면에 뿌려주는 과정이 필요 two way data binding 장점 모델, 뷰 동기화 - 데이터 변화를 감지하여 모델과 뷰가 같도록 만들어줌. (단방향은 같게하기위한 추가적인 코드가 필요) 코드량 ..