Javascript (128) 썸네일형 리스트형 [React] EffectHook - api 활용하여 검색 결과 보여주기 api를 활용하여 진행하기 때문에 chrome store에서 json viewer download이 필요 axios 설치 api를 가져올 사이트는 아래와 같이 생겼다. https://hn.algolia.com/api/v1/search 예시 소스는 아래와 같으며 각 라인별 설명을 주석 처리로 설명해 놓았다. mport React, {useState, useEffect} from "react"; // Json 데이터를 받아 오기 위해 선언 import axios from 'axios' const App = () => { //react satate hook // hits는 가져올 api에서의 데이터 const [data, setData] = useState({ hits: []}) // api 검색 키워드 (쿼.. [React] State Hook React hook은 react 최신 문법의 핵심으로 기존의 리액트가 클래스 기반의 컴포넌트를 생성하는 데 있어 단점을 해결하기 위해 새로 출시한 기능 React hook은 class를 전혀 사용하지 않고 함수로 시작해서 함수로 끝난다. 다음 예시 소스는 state hook을 사용하여 버튼 클릭 시 숫자가 증가하는 웹 페이지에 대한 소스다. import React, { useState } from "react"; // react hook 불러오기 import logo from './logo.svg'; import './App.css'; // useState는 최상단에서 선언해야 한다. // 버튼 클릭 시 숫자 자동 증가 function App() { // 카운트는 클릭 횟수 저장할 변수, setCount.. [React] setState() 활용 - componentDidMount() 실무에서 setState를 비동기적으로 활용하기 해당 예시는 tick() 이라는 초당 업데이트 함수를 정의하여 랜더링 이후 즉시 호출되는 함수인 componentDidMount()를 사용해 랜더링 될 때마다 시간을 업데이트 하는 로직이다. 예시 소스에 앞서 setState는 비동기 함수라는 것과, 실제 랜더링이 이루어지는 render() 함수와 생성자, 그리고 현재 클래스를 종료 시키는 componentWillUnmount() 함수 에서는 setState() 함수를 실행할 수 없다는 것을 알고 있어야 한다. 예시 소스 import React from "react"; class Timer extends React.Component { constructor(props) { super(props) this.s.. [React] Key Warnings 해결 방법 Map함수를 사용하여 반복되는 컴포넌트 혹은 JSX 요소 들을 랜더링 하다 보면 key Warning라는 오류가 콘솔창에 뜨는 것을 자주 볼 수 있다. 예시 import React from 'react'; import './App.css'; function App() { const iter = [0,1,2] return ( { iter.map(item => item) } ) } export default App; 해당 소스 코드 입력 후 localhost:3000에 접속하면 개발자 도구(F12)에 이미지와 같은 오류가 뜨는 것을 확인할 수 있다. 에러를 간단히 읽어보면 유니크한 key가 필요함을 알 수 있다. div 안에 iter.map 부분을 아래와 같이 바꾸면 에러가 사라진다. iter.map(ite.. [React] Event Handling onClick (feat. 이벤트 버블링(event bubbling) 본 예시는 React에서 onClick 이벤트를 실행하는 방법입니다. onclick을 onClick camelCase로 표기하는 것 이외에는 큰 차이는 없습니다. 예시 소스 import React from "react"; function App() { const handleClick = () => { alert('button is clicked'); } return ( // camelCase 표기법으로 표기 this is a button ) } export default App; 파라미터로 값 받기 이벤트 버블링(event bubbling) 방지 이벤트 버블링이란? DOM 객체 이벤트가 실행될 때 하나의 DOM 객체가 내부 안에 있어 외부와 중첩되는 경우 해당 하는 기능이 두 번 실행 되는 것을 방지한다.. [React] Props와 State 차이점 Props와 State의 차이점 먼저 Props는 상위 계층의 컴포넌트와 데이터 교환을 위해 사용한다. 반면 state는 다른 컴포넌트와 상호 교환의 목적이 아닌 해당하는 컴포넌트의 외부 접근을 고려하지 않고 내부적으로 내부 클래스에서만 사용하는 것이 목적이다. 예시 소스 import React from "react"; // class 선언 class Test extends React.Component { constructor(props) { super(props) this.state = { // 문자, 숫자, 함수 다 정의할 수 있다. lang : 'javascript', date : new Date() } } render() { // render 함수 안에서 state 사용 가능 const { lan.. [React] Lifecycle Lifecycle은 리액트가 모든 요소들을 view 로 받기 때문에이 view를 데이터의 단방향을 보장하면서 효과적으로 데이터를 전체적인 틀(클래스) 내에서 단일적으로 관리하기 위한 로직을 마련하는 기능을 함 Rendering 함수를 기준으로 잡고 이전과 이후 시점으로 라이프 사이클을 실행하고 관리하는 기능들이 LifeCycle Method(라이프 사이클 메소드)다. 각각 라이프 사이클 메소드는 this.stat의 사용 가능 여부 또한 정해져 있는데 해당 예는 아래 소스 코드 및 이미지에 나와 있다. 예시 소스import React from "react";class LifeCycle extends React.Component { constructor(props) { super(prop.. [React] Rendering(조건별 Rendering) 조건별로 랜더링 하는 예시 소스 import React from 'react'; // 첫 번째 문자는 대문자 // 컴포넌트는 항상 함수를 반환해야 한다. const Loading = () => Loading... // 조건별로 랜더링 // 단일상태로 로딩 상태일 경우만 출력되는 컴포넌트 class LoadingConponent extends React.Component { constructor(props) { super(props) this.state = { // 로딩이 되기 전 loading : false } } render() { const { loading } = this.state return ( { /* 조건별 페이지 랜더링 */ loading && // Loading일 경우에만 출력 } ) }.. 이전 1 ··· 5 6 7 8 9 10 11 ··· 16 다음
