Javascript/React (26) 썸네일형 리스트형 [React] JSX 문법 JSX란 React에서 컴포넌트의 생김새를 정의할 때 사용하는 문법이다. 보기에는 HTML처럼 생겼지만 실제로는 Javascript다. 바벨이라는 도구를 사용하여 XML 형태의 코드가 Javascript로 변환이 된다. 변환되는 것을 확인하기 위하여 babeljs.io에 접속하여 아래 코드를 입력해 본다. 위 이미지의 네모 안의 createElement 함수가 컴포넌트를 만들어준다. 즉 컴포넌트를 우측 방식대로 계속 선언하는 것은 어려움이 있으니 JSX를 문법을 사용하여 XML형태로 사용하면 이것을 Javscript 형태로 변환하게끔 해주는 것이 바벨이라는 도구다. JSX 문법을 정확하게 Javascript 문법으로 변환하기 위해서는 지켜야 할 규칙들이 있다. 태그는 무조건 닫혀야 된다. (닫히는 태그가.. [React] 첫 번째 리액트 컴포넌트 리액트 컴포넌트를 만들어 보자. 먼저 src 디렉터리에 Hello.js라는 파일을 만들고 아래와 같이 작성한다. import React from 'react'; function Hello() { return 안녕하세요 } export default Hello; 리액트 컴포넌트를 만들 땐 우선 상단에서 다음과 같은 코드를 입력해야 한다. import React from 'react'; 이 코드는 리액트를 불러와서 사용하겠다는 것을 의미한다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데, 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치된다. 그리고 이렇게 import 구문을 통해 리액트를 불러와서 사용할 수 있는 것이다. ∴ 사실 이렇게 모.. [React] React는 어쩌다 만들어졌을까? 리액트라는 라이브러리가 어쩌다 만들어졌는지 아는 것은 리액트를 이해하는 데 도움이 될 것이다. JavaScript를 사용해서 HTML로 구성된 UI를 제어해 봤다면 DOM(Document Object Model) - 각 HTML element에 대한 정보를 지니고 있는 JavaScript 객체 -을 변형시키기 위해 우리가 어떤 작업을 해야 하는지 익숙할 것이다. DOM을 변형하려면 브라우저의 DOM Selector API를 사용해서 특정 DOM을 선택한 뒤 특정 이벤트가 발생하면 변화를 주도록 설정해야 한다. 0 +1 -1 const number = document.getElementById("number"); const increase = document.getElementById("increase").. [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.. 이전 1 2 3 4 다음
