React 11

[React] 리액트 훅 useEffect

useEffect란? 렌더링되거나 변수의 값 또는 오브젝트가 달라지게 되면, 그것을 인지하고 업데이트를 해주는 함수. 페이지가 처음 렌더링되고 난 후 무조건 한번 실행된다. useEffect에 배열로 지정한 useState값(Dependency)이 변경되면 실행된다. useEffect(effect, [, deps]); -effect 함수 렌더링 이후 실행할 함수 -deps 특정한 값이 변경될 때 effect함수를 실행하고 싶을 경우 배열안에 그 값을 넣어준다. 빈 배열일 경우 렌더링된 후 단 한번만 실행된다. useEffect(() => {}); // 1 useEffect(() => {}, []); // 2 useEFfect(() => {}, [특정 변수 또는 오브젝트]); // 3 1. Dependen..

FRONT/REACT 2022.03.01

[React] Styled-component- Global Style 사용하기

css 초기화를 위해 styled-reset 설치 npm install styled-reset styled-components styled-components는 local로 동작한다. 개별 컴포넌트가 아닌 모든 컴포넌트에 동일한 스타일을 적용하는 편이 유리한 경우가 있다. 그러므로 GlobalStyles.js 파일을 생성해 Global Style을 관리한다. createGlobalStyle() 함수로 전역 스타일 컴포넌트를 생성한다. GlobalStyle.js import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` ${reset}; body { display: flex; justify-cont..

FRONT/REACT 2022.02.18

[TS] TypeScript란? (테스트/설치)

TypeScript 자바스크립트를 기반으로한 프로그래밍 언어. strongly-typed 언어로, 프로그래밍 언어가 작동하기전에 type을 확인한다. 브라우저는 TypeScript를 이해하지 못한다. 사용자에게 publish할 때, TypeScript가 컴파일해서 평범한 JavaScript로 만들어준다. Typescript 테스트 할 수 있는 곳 https://www.typescriptlang.org/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www...

FRONT/JAVASCRIPT 2022.01.20

[React] Styled Component(As, Attr)

import styled from "styled-components"; const Father = styled.div` display: flex; `; const Input = styled.input.attrs({ required: true })` background-color: tomato; `; function App() { return ( ); } export default App; As as 라는 props를 사용하면 명시한 태그로 컴포넌트를 사용할 수 있다. Father 컴포넌트는 header가 된다. Attrs attrs 뒤에 대괄호 안에는 input으로 전달된 모든 속성을 가진 오브젝트를 담을 수 있다. 모든 input 에 required: true가 적용된다.

FRONT/REACT 2022.01.20

[React] Styled Component (컴포넌트 확장)

노마드코더 React JS 마스터 클래스 #2 .2 컴포넌트 확장이란, 기존 컴포넌트의 모든 속성을 가지고 오면서 새로운 속성까지 더해주는 것이다. props를 통해 컴포넌트 style을 설정한다. import styled from "styled-components"; const Father = styled.div` display: flex; `; const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; const Circle = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100..

FRONT/REACT 2022.01.19

[React] Styled Component 사용하기

노마드코더 React JS 마스터 클래스 #2 STYLED COMPONENTS npm i styled-components 로 styled-components를 설치해준다. import styled from "styled-components"; function App() { return ( ); } export default App; 기존의 코드는 태그 안에 일일히 style을 지정해주는 것이였다. styled component 사용하면 className이나 style을 사용할 필요가 없다. styled component에서 import한 styled를 이용한다. div를 사용해 닫아줄 필요가 없다. 모든 style은 컴포넌트를 사용하기 전에 미리 컴포넌트에 포함된다. css코드를 css 방식 그대로 쓸 ..

FRONT/REACT 2022.01.19

[React] UseEffect 사용하기(노마드코더 영화 웹서비스 만들기)

import Button from "./Button"; import styles from "./App.module.css"; import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target.value); useEffect(() => { console.log("I run only once."); }, []); // 처음 rend..

FRONT/REACT 2022.01.06

[React] 노마드코더 영화 웹 서비스 만들기(3) - Rendering

Rendering Movies.data.data.movies로 영화 데이터 목록들을 확인한다. es6를 사용해 이렇게 단축시킬 수 있다. getMovies = async() => { const {data : {data : {movies}}} = await axios.get("https://yts-proxy.now.sh/list_movies.json"); console.log(movies); } 이제 이 movies를 state안에 넣어야 한다. this.setState({movies : movies}); 를 최신버전 자바스크립트를 사용해 이렇게 짧게 표현한다. getMovies = async() => { const {data : {data : {movies}}} = await axios.get("http..

FRONT/REACT 2021.08.25

[React] 노마드코더 영화 웹 서비스 만들기(2) - Fetch API

Fetching Movies from API Axios 일반적으로 자바스크립트에서 data를 fetch하는 방식은 fetch()를 사용하는 것이지만 여기선 Axios를 사용한다. npm install axios Axios를 설치한다. API 가져오기 https://yts-proxy.now.sh/list_movies.json API를 가져올 YTS라는 사이트는 불법 토렌트 사이트라 도메인을 수시로 바꾸기 때문에 API URL 이 계속 변경된다. 그래서 니콜라스가 깃허브에 올린 YTS 사이트를 추적하는 주소를 사용한다. JSONView 라는 크롬 확장프로그램을 설치해서 보면 보기 좋게 바꿔준다. import React from "react"; import axios from "axios"; class App..

FRONT/REACT 2021.08.25