Frameworks/React.js

👉 children이란? 컴포넌트로 감싸진 부분 children 예시 function App(){ return ( 안녕하세요 // Container 컴포넌트의 children == 안녕하세요 ) } // children은, 해당 컴포넌트의 인자(매개변수)로 전달된다! function Container({children}){ return ( {children} ) }

Redux란? 여러 컴포넌트가 공유하는 state를 구현하는 Node.js 패키지 ( 전역 state ) 기본 동작 방식 1. store에 state저장 2. dispatch가 Action 이라는 이벤트 감지하고, reducer에게 Action 내용 전달 3. reducer가 Action에 맞춰 store내부 state변경 4. state 변경감지후, 필요한 화면 재렌더링 설치 npm i @reduxjs/toolkit npm i -D react-redux // typescript 사용시 npm i -D @types/react-redux Redux-Toolkit이란? configureStore() , createSlice() 등의 함수를 사용하여 기존의 Redux 코드를, 간편하고 가독성 좋게 바꿔준다. ..

컴포넌트 마운트란? 컴포넌트 생성부터, 최초 렌더링까지의 과정 컴포넌트 언마운트란? 화면의 렌더링된 컴포넌트를, 삭제하기 까지의 과정 컴포넌트 렌더링 시작 useLayoutEffect 호출 컴포넌트 렌더링 완료 useEffect 호출 onLayout 이벤트 발생 컴포넌트 언마운트 시작 useLayoutEffect 반환 함수 호출 useEffect 반환 함수 호출 컴포넌트 언마운트(파괴) 완료

useState import React, {useState} from 'react'; export default function myState() { const [state, setState] = useState(); /* 인자로, number type의 변수를 받거나, 인자로, number type의 변수를 반환하는 함수를 받고, [number, (number)=> void] 형식의 배열을 반환한다. */ }

React는 javascript로 이루어져 있으므로, 홈페이지를 꾸미기 위해서는 CSS엔진이 필요하다 Yoga - css엔진 (C++로 구현됨) Yoga엔진은 기존의 css엔진과 비슷하나, 약간의 차이점이 존재한다. 기존엔진 justify-content : center Yoga엔진 justifyContent : center React Native에서 컴포넌트 꾸미기 (스타일링) 1. 뷰 컴포넌트 이름에 View가 들어간 컴포넌트는, backgroundColor 속성을 사용해 배경색을 지정할 수 있다. 2. 텍스트 컴포넌트 Text 컴포넌트는, color 속성을 사용해 글자색을 지정할 수 있지만, 배경색은 지정할 수 없다 인라인 스타일로 꾸미기 인라인 : 컴포넌트의 기본속성인 style을 이용해, 컴포넌..

React의 API란? JSX 구문에서 사용되지않고, OS의 javascript엔진에서 사용하는 모든 기능 React Native API Alert 대화 상자를 보여주는 API import {Alert} from 'react-native' // API 불러오기 Alert.alert("제목", "메시지") // React Native에서 함수형식으로 사용 StyleSheet API [React.js] React와 CSS React는 javascript로 이루어져 있으므로, 홈페이지를 꾸미기 위해서는 CSS엔진이 필요하다 Yoga - css엔진 (C++로 구현됨) Yoga엔진은 기존의 css엔진과 비슷하나, 약간의 차이점이 존재한다. 기존엔진 just defineall.tistory.com Platform ..

속성이란? 클래스의 멤버변수 ( 클래스 내부 다양한 타입의 변수 ) React 컴포넌트의 속성 컴포넌트는, UI를 구성하는 "클래스" 이므로, 속성을 가질 수 있다. 리액트는 컴포넌트의 속성이 바뀌면, 즉시 화면에 반영한다. ( 재렌더링 ) JSX는 XML이므로, 모든 속성(attribute)는 따옴표 혹은, 중괄호로 감싸져야 한다. 속성값이 객체일때는 중괄호를 하나 더 사용해, 새로운 객체를 만들 수 있다. 기본 속성 React와 React Native의 컴포넌트는 key, children, ref 등의 속성을 기본적으로 가진다. key 속성 React가 컴포넌트의 렌더링 속도를 최적화하기 위한 속성 style 속성 React가 컴포넌트의 스타일을 지정하기 위한 속성 ( 객체를 설정해야한다. ) ref..

컴포넌트란? React에서 UI를 담당하는 클래스 ( 여러 요소를 화면에 렌더링해주는 역할 ) 클래스 컴포넌트 작성 방식 import React, {Component} from 'react'; import {Text} from 'react-native'; // 클래스 컴포넌트는 React의 Component 클래스를 반드시 상속해야한다. export default class ClassComponent extends Component { render() { return Hello world!; } /* render() 메소드 사용해서 가상DOM을 물리DOM으로 바꾸어 화면에 표출 render() 메소드는, 반드시 null, undefined, React.createElement반환값, JSX구문을 반환해야..

JSX란? Javascript + XML ( JavaScriptXml ) 태그이름을 자유롭게 지을수 있는 XML javascript 문법에, XML구문이 있는 것처럼 사용하는, React의 문법 JSX 작동 과정 1. 사용자가 JSX 작성 2. ESNext 코드를 Babel 플러그인에게 전달 3. Babel 플러그인이 ESNext 코드를 평범한 React.createElement 함수를 호출하는 javascript로 변환 4. React가 변환된 javascript를 실행 JSX 장점 React.createElement 코드를, 단순하고 간결하게 만들 수 있다 JSX 사용법 (1) React Native JSX - 코어 컴포넌트 - 실제는 존재하지 않지만, XML 문법이 요구하는 부모 컴포넌트로 동작하도..