본문 바로가기

분류 전체보기304

[LIBRARY] react-router-dom react-router-dom이란? 리액트 라우터는 리액트의 서드파티 라이브러리로 화면전환을 도와주는 역할을 한다. 일반적인 웹에서 a태그를 이용해 다른 페이지로 이동했었다면, 리액트에서는 리액트 라우터를 통해 Link 태그를 사용하여 화면을 전환한다. 리액트는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로, 페이지 이동 시에도 굳이 화면 전체를 새로고침 할 필요가 없기 때문이다. 사실 리액트 라우터 없이도 컴포넌트 업데이트를 통해 화면전환을 할 수 있다. 그럼에도 리액트 라우터를 사용하는 이유는 사용자에게 새로고침, 뒤로가기, 즐겨찾기 등의 기능을 제공하기 위함이다. reactrouter.com/ API : BrowserRouter import { BrowserRouter as .. 2020. 9. 11.
React 디렉토리 구조 고찰 Atomic design : https://bradfrost.com/blog/post/atomic-web-design/ https://simsimjae.tistory.com/407 구성(디렉토리명): assets / compoents(atom) / container(molecules, organisms, templates) / pages / services / hooks container 단위의 컴포넌트는 index.js를 사용해 여러 컴포넌트를 묶어 import 해오자. 그렇게 되면... import 컴포넌트#1 from "" import 컴포넌트#2 from "" import 컴포넌트#3 from "" ↓↓↓ import { 컴포넌트#1, 컴포넌트#2, 컴포넌트#3 } from "--style.js".. 2020. 9. 11.
[리엑트 CSS Rule] How to organize CSS in multiple files CSS를 여러 파일로 분할하지 않는 방법은 CSS를 여러 파일로 적절하게 구성하는 방법을 배우는 것이다. 장점: 1. css코드가 작다. 가독성이 좋아진다. - 작고 탐색하기 쉽다. 위아래로 스크롤할 필요 없이 한눈에 파악하여 유지 보수할 수 있다. 2. selector간의 충돌 방지 - CSS selectors는 계단식(cascade)화 되지 않고 다른 selectors와 충돌하지 않는다. [Rules] 1. 제작할 페이지를 어떻게 컴포넌트로 구성할 지 미리 계획. a. 컴포넌트 should be self-contained. b. 제작할 컴포넌트가 어떻게 작동될지 미리 생각해야 한다. (plan and design) c. 컴포넌트는 재사용될 수 있어야 한다. (reusable) d. 컴포넌트의 styl.. 2020. 9. 11.
React 에서 css 적용하기 (6가지) github.com/Khan/aphrodite 0. 상위 컴포넌트에 className을 넣으면 하위 컴포넌트에서 props로 받아올 수 있다. return( ) const 컴포넌트명 = ( { className } ) => { } 1. inline styling class MyJob extends React.Component { render() { return ( Hello Style! ); } } 2. JavaScript Object class MyJob extends React.Component { render() { const hstyle = { color: "black", backgroundColor: "blue", fontFamily: "Arial" } return ( Hello Style! ).. 2020. 9. 10.
배열함수 개념과 APIs www.youtube.com/watch?v=yOdAVDuHUKQ [looping] 1. for( ){ } 2. for( let 임의의 변수명 of 정의된 변수명(배열) ){ } 3. forEach( ①콜백함수(3가지의 인자: value, index, array), ②Argument ){ } [Addition, deletion, copy] 1. add an item to the end : push( ) 2. remove an item from the end : pop( ) 3. add an item to the beginning : unshift( ) 4. remove an item from the beginning : shift( ) ** push와 pop은 마지막 데이터를 사용하기 때문에 비교적 빠르다.. 2020. 9. 9.
컴포넌트의 디자인 패턴: Stateless Component 무상태 컴포넌트 무 상태 컴포넌트는 재사용성이 굉장히 높은 컴포넌트를 작성할 수 있게 도와줍니다. 컴포넌트를 완전한 함수로 정의한다는 점이 특징입니다. 개인적으로는 더욱 명확한 의미를 전달할 수 있다는 점에서 state가 없을 경우엔 무상태 컴포넌트로 작성합니다. 기본 컴포넌트에서 보여드렸던 예제를 이용해 보면 다음과 같습니다. medium.com/little-big-programming/react%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-92c923011818 type#1 : 기본 컴포넌트 const Button = ( props ) => ( ) type#2 : .. 2020. 9. 4.

티스토리툴바