Front-end/React (34) 썸네일형 리스트형 React Hooks란? React Hooks React Hooks은 리액트의 새로운 기능으로 React 16.8버전에 새로 추가된 기능으로 state, component에 대한 것들을 바꿔놓았다. 예를 들면 function component에서 state을 가질 수 있게 된 것 만일 앱을 react hook을 사용하여 만든다면 class component, render 등을 안해도 된다는 뜻이다. 모든 것은 하나의 function이 되는 것 함수형 프로그래밍이 가능해지는 것 React Hokks를 사용 했을 때와 안했을 때의 차이를 간단한 예제로 살펴보도록 하겠습니다. class component import React, { Component } from 'react'; class App extends Component { s.. React.JS 강의 by 코딩앙마 https://youtu.be/05uFo_-SGXU?list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7- Styled Components : 리액트 스타일 컴포넌트 Styled Components? CSS나 SASS같이 class, id, tag name를 가져와 쓰지 않고, 스타일 지정된 컴포넌트 생성하여 Tag 쓰듯 스타일컴포넌트를 쓰는 것을 말한다. 즉, 리액트에서 ui단위를 나누어 컴포넌트화 하듯, 스타일을 컴포넌트화 하여 재사용이 가능하며 전역에서 중첩 사용되지 않게 (컴포넌트 자체에서만 적용됨) 만들어준다. Scss & styled components 비교 CSS만 쓰다 SASS를 처음 썼을때 너무나 편하게 사용한 것도 잠시! 클래스이름이 겹치면 전역에서 같은 클래스 이름에 동시에 적용되는 문제로 여기저기 스타일이 무너지는 문제를 격곤 한다. 그래서 최상위 태그의 클래스명을 시작-하고-또-하이픈을-이어-이름을-짖는 것과 같이 길죽한 문장을 쓰기도 했는데... SPA(Single Page Application)란? SPA란? SPA란 쉽게 말해 1개의 페이지만 있는 애플리케이션이다. 하나의 페이지에서 내용만 바뀌는 것이다. 서버로부터 새 페이지(html)를 불러오지 않고 현재 페이지를 동적으로 다시 작성하는 웹앱 혹은 그런 웹앱을 작성하는 패러다임, 디자인 패턴이다. 최초로 한 번 페이지 전체를 로드한 후에는 데이터만 변경해서 쓸 수 있다. 서버로부터 정적 파일을 한 번이나 여러 번에 걸쳐 다운로드 받고 사용자와 상호작용 중 필요한 데이터만 서버에서 동적으로 받는다. SPA 결과물은 하나의 웹 문서가 아니라 응용 프로그램 같은 것이다. 보통 Amazon S3 버킷의 정적 호스팅을 통해 소스나 파일을 전송한다. 여기서 html 파일 전송은 하지 않고 XML이나 JSON만 서버에서 요청되거나 서버로 전송되는데, 이 정.. 리덕스는 무엇이고, 왜 사용하는가? 🔧 리덕스 리덕스란, 자바스크립트 애플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구입니다. 복잡한 상태 관리가 이루어지는 SPA(Single Page Application)에서 특히 유용하게 사용됩니다. 물론, 리덕스는 리액트 뿐만 아니라 jQuery, Angular 등을 사용하는 애플리케이션에서도 사용할 수 있지만, 이번 글은 리액트와 함께 사용하는 리덕스에 대해서 공부해보고자 합니다. 🤔 들어가기 앞서, 리액트 상태 관리에 대한 간략한 설명 리액트를 사용하면서, 상태 관리를 하는 것은 매우 중요한 요소 중 하나입니다. 만약, 부모 컴포넌트(stateful한 컴포넌트)에서 상태를 전달받는 자식 컴포넌트들이 있는 아래 모습과 같은 상황이 있다고 가정해 봅시다. 리액트의 데이터 흐름은 단방향.. React JS Crash Course - Get icons (5) - react 아이콘 받기 : npm i react-icons - package.json에서 설치된걸 확인할 수 있다 - import하여 사용한다 React JS Crash Course - PropTypes (4) - App.js에 title을 component에 사용할 수 있도록 연결 PropTypes 자바스크립트의 유연한 특성 때문에 작성이 편한 반면, 파일이 많아지면 생산성이 떨어진다는 점 때문에 타입스크립트를 많이 사용하는데, 반드시 자바스크립트를 이용해 앱을 개발해야 하는 상황에서는 이러한 문제점을 피하기 위해 PropTypes를 활용하는 것을 권장한다. PropTypes는 부모로부터 전달받은 prop의 데이터 type을 검사한다. 자식 컴포넌트에서 명시해 놓은 데이터 타입과 부모로부터 넘겨받은 데이터 타입이 일치하지 않으면 콘솔에 에러 경고문이 띄워진다. - Styling할때 index.css파일을 사용한 - Js파일 안에서 Styling하는법 Github Code: https://github.com/b.. React JS Crash Course - App component & JSX (3) - 요즘엔 hooks로 functions를 많이 이용한다 -기본 App.js파일 - 해당 부분을 클릭하여 react(Javascript로 변경해준다) - 필요없는 기본파일 삭제하기 - div에서 밖에서 작성하면 컴파일 오류가 난다 - 기본파일들이 id=root에 감싸져 있다. - 만약 className을 주고싶지 않다면 이렇게 사용하면 된다 - 변수(variable) - components 폴더에 파일을 만든다 - Header.js처럼 첫문자는 대분자로 써서 사용한다. - ES7 React/Redux/GraphQL/React-Native snippets 설치하기 - 단축키를 사용하여 편하게 Component를 사용할 수 있다 ( rcc, rce 등등) - Arrow function도 쉽게 사용할 수 있다.. 이전 1 2 3 4 5 다음
