Javascript (130) 썸네일형 리스트형 [React] Components refactoring 재사용 가능한 컴포넌트를 활용하여 소스코드 리팩토링(refactoring) 게시판 코멘트라는 가상의 소스 코드가 있다고 친다. import React, { use State } from "react"; import "./App.css"; function App(props) { return ( {props.author.name} {props.text} {formatDate(props.date)} ); } export default App; 위 소스도 물론 작동하는 데 있어서 문제는 없다. 하지만 각각의 요소들이 반복적으로 사용될 수 있기 때문에 컴포넌트화로 리팩토링 할 수 있다. 아래 소스가 리팩토링을 거친 소스다. import React, { use State } from "react"; import ".. [React] Redux 특징 및 설치법 redux의 특징 one immutable store 저장소는 한 개만 가지고 있다 저장소는 불변하고 그 스토어는 단일성을 유지한다. Actions trigger changes 특정한 Actions을 사용하기 위한 다양한 연산들을 Action으로 정의하고 그 Action이 수행하고자 하는 상태 변화를 유도한다. Action의 상태 변화를 유도하고 다른 어떠한 곳에서도 데이터의 상태 변화를 접근하지 않기 때문에 단방향 적으로 흐를 수 있다. Reducers updateState 데이터 변화 시 기존 데이터의 속성이 변하지 않고 새로운 데이터를 반환 설치 경로가 중요하다. pakage.json과 동일한 경로로 이동하여 터미널에서 설치를 진행한다. [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.. 이전 1 ··· 5 6 7 8 9 10 11 ··· 17 다음
