Java, JavaScript/React, React Native (14) 썸네일형 리스트형 [React] fetch를 사용한 데이터 가져오기 우선 fetch는 리액트에서 API를 이용하여 서버와 비동기 요청을 할 수 있는 하나의 방식 중에 하나입니다. 아래의 코드는 https://www.themoviedb.org/ 사이트에서 제공하는 API 데이터를 가져오는 것을 코드로 나타낸 것입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import React, { useEffect, useState } from 'react'; import { API_URL, API_KEY, IMAGE_BASE_URL } from '../../Config'; import MainImage from './Selctions/MainImage'; function LandingPage() { const [Movies, setMov.. [React] 컴포넌트의 생명 주기 리액트에서 사용되는 컴포넌트들의 생성 주기에 대해서 알아보겠습니다. 위의 그림에 기본적인 컴포넌트의 생성, 완료, 갱신, 소멸에 거치는 과정들을 그림으로 표현해놓았습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 import { Component } from 'react'; class LifeCycleExample extends Component { static getDerivedStateFromProps() { console.log('getDerivedStateFromProps 호출'); return {}; } constructor(props) { super(props); .. [React] state 사용 시 주의할 점 props를 통해서는 컴포넌트 내부에서 값을 바꿀 수 없다. 이번에는 state를 통해서 컴포넌트의 내부에서 값을 바꾸는 방법에 대해 알아보겠다. 생성자에서 반드시 초기화를 해줘야 한다. state값을 바꾸려면 반드시 setState() 함수를 사용한다. 1 2 3 4 5 6 7 8 9 10 11 12 import React, { Component } from 'react'; class Counter extends Component { constructor(props) { super(props); this.state = { count: props.count, }; this.increaseCount = this.increaseCount.bind(this); } 생성자를 사용하여 state를 만들어줍니다. .. [React] 프로퍼티가 뭐야? 프로퍼티는 상위 컴포넌트(App)가 하위 컴포넌트(PropsExample)에 값을 전달할 때 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 import React, { Component } from 'react'; import PropTypes from 'prop-types'; class PropsExample extends Component { render() { const { boolValue, numValue, arrayValue, objValue, nodeValue, funcValue, } = this.props; return ( 불리언값: {String(boolValue)} 숫자값: {numValue} 배열.. [React] 템플릿 문자열 React의 템플릿 문자열 사용 방법입니다. 1 2 3 4 5 6 function App() { var cart = { name: '계란과자', price: 1000 }; var getTotal = function (cart) { return cart.price + '원'; }; cart라는 변수에 name과 price에 맞는 임의의 값을 넣어줍니다. 그리고 getTotla 함수를 만들어서 cart에 있는 price에 '원'을 붙여줍니다. 1 var myCart = `장바구니에 ${cart.name}가 있습니다. 총 금액은 ${getTotal(cart)}`; myCart에 저장되는 문자열이 템플릿 문자열을 사용한 것 입니다. `` ← window 기준 ~표시 있는 키에 있습니다. 템플릿 문자열을 사용함으.. [React] 리액트 기본 설정 'Do it 리액트 프로그래밍의 정석' 공부한 내용을 정리하는 글입니다. 리액트 프로젝트를 생성해준다. 1. Prettier과 Reactjs code snippets 플러그인을 설치해준다. 그리고 프로젝트에 .prettierrc 라는 .jsx 파일을 생성해준다. 생성이 완료되었으면 1 2 3 4 5 6 7 8 9 { "useTabs": false, "printWidth": 100, "tabWidth": 2, "trailingComma": "all", "semi": true, "singleQuote": true } useTabs - 탭을 사용할 때 빈칸을 채운다. printWidth - 파일 최대 길이를 100칸으로 지정한다. tabWidth - 탭의 빈칸을 두칸으로 지정한다. trailingComma -.. [React Native] Props는 어떻게 사용할까? props는 state와 마찬가지로 리액트 네이티브에서 구성 요소를 제어하는 데이터 유형 중에 하나이다. 하지만 state와 다른 점은 props는 정적인 데이터를 다룰 때 주로 사용된다는 점이다. props에 대해 말하면 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 것이다. 오늘 기본 화면은 깔끔하게 아무것도 안했다. 차라리 색깔을 안넣는게 더 깔끔하고 잘된 것 같다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 import React, { Component } from 'react'; import { Text, View, StyleSheet, Button } from 'react-native'; export default c.. [React Native] State는 어떻게 사용할까? state는 리액트 네이티브에서 구성 요소를 제어하는 데이터 유형 중에 하나이다. state는 동적인 데이터를 다룰 때 주로 사용된다. state의 값을 바꾸고 싶다면 setState함수를 사용하여 바꿀 수 있다. 여기서 중요한 점은 setState가 호출될 때마다 해당 컴포넌트가 있는 뷰들은 다시 랜더링을 하게 된다. 이것은 state를 필요하지 않다면 너무 많이 선언하지 말라는 것과 같다. 불필요한 state는 너무 많은 뷰를 랜더링 하게 하기 때문이다. state변수는 setState를 통해서 값을 바꾸어준다. setState가 호출되면 해당 컴포넌트가 있는 뷰는 다시 랜더링하게 된다. 너무 많은 state는 앱의 기능 저하로 이어질 수 있다. 오늘의 기본 화면이다. 갑자기 개구리 생각이 나서 녹색.. 이전 1 2 다음
