본문 바로가기

전체 글67

[React-Native] 컴포넌트 스타일링 💡 인라인(inline) 스타일링 컴포넌트의 태그에 직접 스타일을 적용하는 방식이다. // src/App.js import React from "react"; import { View, Text } from "react-native"; const App = () => { return ( Inline Styling - Text Inline Styling - Error ); }; export default App; 💡 클래스 스타일링 컴포넌트 스타일에 StyleSheet 에 정의된 스타일을 적용하는 방식이다. import React from "react"; import { StyleSheet, View, Text } from "react-native"; const App = () => { return ( I.. 2021. 11. 4.

[React-Native] React Native 에서 컴포넌트란 💡 컴포넌트란? 재사용할 수 있는 조립 블록으로, 화면에 나타나는 UI 요소이다. 그러나 단순히 UI 역할만 하는 것이 아닌 부모로부터 받은 속성이나 자신의 상태에 따라 표현이 달라지고 다양한 기능을 수행합니다. 💡 JSX JSX 는 마치 HTML 을 작성한 것 같은 코드이다. 이러한 JSX 는 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능으로 리액트 프로젝트에서 사용된다. export default function App() { return ( Open up App.js to start working on your app! ); } 여러 개의 요소를 표현할 경우 하나의 부모로 감싸야 한다. 위의 경우 Text 와 StatusBar 태그를 View 태그로 감싸고 있다. V.. 2021. 11. 3.

[React-Native] React Native 시작하기 💡 리액트 네이티브 환경 설정하기 1. node.js 설치하기 2. 파이썬 2.x.x 버전 설치하기 3. JDK 설치하기 4. 안드로이드 스튜디오 설치하기 파이썬을 설치하는 이유는 리액트 네이티브가 빌드할 때 파이썬이 필요하기 때문이다. node.js 와 JDK (16 버전) , 안드로이드 스튜디오는 이미 설치되어 있었기 때문에 추가적으로 설치하지는 않았다. JDK 환경 변수 설정하기 안드로이드 스튜디오 환경 변수 설정하기 안드로이드 스튜디오 설정 1. 안드로이드 스튜디오 실행 -> More Actions -> SDK Manager 클릭 2. SDK Platforms 에서 Show Package Details 클릭 -> Android 10.0 버전의 SDK Platform, Intel Atom_64 Sy.. 2021. 11. 2.

[React] 함수 컴포넌트에서 리렌더링 최적화를 위한 방법 함수 컴포넌트에서 React.memo() 함수를 사용하는 것만으로 컴포넌트 최적화가 끝나지는 않는다. 예를 들어 최신 상태의 todos 를 참조하는 onClick 같은 함수가 있어서 todos 배열이 바뀔 때마다 함수가 새로 만들어진다고 할 때, 이렇게 함수가 계속 만들어지는 상황을 방지하는 방법은 두 가지이다. 1. useState 의 함수형 업데이트 기능 사용하기 예를 들어 기존에 setTodos 함수를 사용했다고 하면, 이 함수를 사용할 때 새로운 상태를 파라미터로 넣는 대신 상태 업데이트를 어떻게 할지 정의해주는 업데이트 함수를 넣음으로써 함수형 업데이트를 할 수 있다. setNumber(number+1) 이 아니라 setNumber(preNumber => preNumber + 1) 과 같은 업데.. 2021. 10. 27.

[React] Hooks 정리 💡 useState // useState 함수 사용하기 import { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value} 이다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 ); }; export default Counter; useState 는 하나의 상태 값만 관리할 수 있으나 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState 를 여러 번 사용하면 된다. useState(0) 이란 초기값을 0 으로 하겠다는 의미이다. const [value, setValue] 에서 첫 번째 원소인 value 는 .. 2021. 10. 26.

[React] 컴포넌트 알아보기 ✍ 비구조화 할당 const { name, favoriteNumber, children } = this.props; // 비구조화 할당 const { number, fixedNumber } = this.state; // 비구조화 할당 this.props 가 가진 name, favoriteNumber, children 값을 { name, favoriteNumber, children } 에 넣어준다. ✍ constructor 없이 state 초깃값 지정하기 class Counter extends Component { state = { number: 0, fixedNumber: 0 } render(){ const {number, fixedNumber} = this.state; return ( ... ); } .. 2021. 10. 26.

[React] 글쓰기 기능 구현하기 ✍ 필요한 라이브러리 설치 yarn add quill : 글 작성하는 Editor 라이브러리 설치 yarn add styled-components : CSS 관련 리액트 라이브러리 중에서 가장 인기있는 라이브러리 설치 리덕스 확장 프로그램 : https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd Redux DevTools Redux DevTools for debugging application's state changes. chrome.google.com 리덕스 개발 툴을 다운받으면 크롬으로 react 를 실행시켜서 개발할 때 redux state 변화를 확인할 수 있다. ✍ 구조 1. page 에.. 2021. 10. 22.

[React] Redux 폴더 구조 정리하기 위의 포맷으로 정리를 해보았다. 💡 흐름 : components -> modules(action 생성) -> containers (dispatch, reducer, state 값 변경) -> components (UI) index.js 에서 reducers 임포트 경로 수정하기 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reducers from './modules/bpp' import reportWebVitals from './reportWebVitals'; import { Provider } from 'react-redux' import { .. 2021. 10. 21.

[React] Redux 란? 💡 Redux redux를 사용하는 이유는 state 를 여러 컴포넌트에 전달하고 관리하기가 어렵기 때문에 store 를 통해 여러 컴포넌트에 쉽게 전달하고 관리할 수 있도록 만든다. 즉 Flux 와 같은 구조이다. React 작업환경에서 Redux 사용하기 (라이브러리 설치) npm install --save redux npm install --save react-redux npm install --save redux-actions 💡 흐름 : VIEW -> ACTION -> (STORE) -> REDUCER -> DISPATCH(ACTION) -> STATE -> UI index.js 작성 store 를 생성하고 store 를 에 props 로 전달해서 컴포넌트 트리에 접근할 수 있도록 만든다. 그리.. 2021. 10. 21.

이전 1 2 3 4 5 6 ··· 8 다음

티스토리툴바