전체 글 (265) 썸네일형 리스트형 [React] styled-components 모듈 사용하기(조건 , 외부,상속) 먼저 Styled-components를 install해야 한다. vsCode를 사용하시는 분들은 아래 확장팩을 추가하시면 좀 더 편하게 styled-components를 사용하실 수 있습니다. 아래부터 예시 소스입니다. 라인별 설명은 주석처리로 상세하게 해 놓았습니다. 총 세 가지 예시입니다. styled-components 사용 예시 styled-components 외부의 javascript 코드에 바로 접근하는 예시 styled-components 상속 예시 Styled-components 예시 소스 isLoaded가 false냐 true냐 조건에 따라 화면에 complete 메시지를 보여주거나 숨겨주는 소스입니다. import React from "react"; import "./App.css"; .. [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 객체가 내부 안에 있어 외부와 중첩되는 경우 해당 하는 기능이 두 번 실행 되는 것을 방지한다.. 이전 1 ··· 8 9 10 11 12 13 14 ··· 34 다음
