React (7) 썸네일형 리스트형 [React] Styled Component로 Global Theme 다루기 theme.js 생성 const theme = { color: { primary: '#03a9f4', // 주 색상 secondary: '#795548', // 부 색상 white: '#FFFFFF', gray: '#CCCCCC', default: '#999999', // 기본 문자 색상 error: '#FF0000', // 오류 색상 } } App.js styled-component 의 ThemeProvider 와 위에서 만든 theme 을 가져온 후, 컴포넌트 최상단에 감싸 준다. import { ThemeProvider } from 'styled-components' import theme from './theme' 이제 styled component에서 props 로 접근 할 수 있다. const.. [React] Currying 과 HOC 에 대해서 커링이란? 커링은 반환값이 함수인 디자인 패턴을 말한다. 왜 커링을 사용해야 하는가? 중복된 코드를 줄여준다. 원하는 기능을 적재적소에 조합해서 사용할 수 있다. 실행 시점을 뒤로 미룰 수 있다 const server = ip => { return (connectionInfo) => { } } // 사용 const connection1 = server('http://localhost:3001') const connection2 = server('http://localhost:3002') // do someting... connection1({id: 'id1', password: 'password1'}) connection2({id: 'id2', password: 'password2'}) HOC란? Hig.. [React] Rest operation VS Spread operation 리액트를 공부하다보면 아래오 같은 코드를 자주 접할 수 있을 것이다. import React from 'react'; import './style.css'; const Button = ({ children, loading, ...props }) => ( {loading ? 'loading...' : children} ); Button.defaultProps = { loading: false, }; export default Button; Button 이라는 컴포넌트를 만들고 props를 받아서 처리하고 있다. 우리가 주목해야 할 것은 . . . 이다. (이하, 닷닷닷) 정답부터 말하면, 첫 번째로 쓰인 ({ children, loading, ...props }) 이곳에서 닷닷닷은 Rest operatio.. [면접질문 #4] What is difference between Element and Component? - Element와 Component의 차이점이 무엇인가? 아래 글은 https://github.com/sudheerj/reactjs-interview-questions 에서 번역한 내용이며, Sudheer Jonna 로 부터 번역 허락을 받았음을 알립니다. 이 글을 읽고, 면접 뿐만 아니라 자바스크립트의 기본 및 심화 개념을 잡는데 도움이 되었으면 좋겠습니다. 영어 전공자가 아니므로, 오역 또는 제 나름대로의 직역이 있습니다. Element는 DOM의 관점에서 우리가 화면에 나타내고 싶은 plain object 이다. Element는 다른 Element를 그들의 props로 포함할 수 있다. React의 element를 만드는 것은 가벼운 작업이다. Element가 한번 생성되면 다시는 변형되지 않는다. React Element는 다음과 같이 표현할 수 있다... [면접질문 #3] What is JSX - JSX란 무엇인가? 아래 글은 https://github.com/sudheerj/reactjs-interview-questions 에서 번역한 내용이며, Sudheer Jonna 로 부터 번역 허락을 받았음을 알립니다. 이 글을 읽고, 면접 뿐만 아니라 자바스크립트의 기본 및 심화 개념을 잡는데 도움이 되었으면 좋겠습니다. 영어 전공자가 아니므로, 오역 또는 제 나름대로의 직역이 있습니다. JSX ECMAScript 문법의 확장판이다. Basically, 이것은 React.createElement()를 사용해 개발했던 것과 다르게 편리함을 제공해준다. JSX는 HTML과 Javascript와 매우 유사하다. 예시는 아래와 같다. 태그 안은 render 함수에 Javascript 함수로 반환된다. class App exten.. [면접질문 #2] What are the major features of React - 리액트의 가장 큰 특징은 무엇인가? 아래 글은 https://github.com/sudheerj/reactjs-interview-questions 에서 번역한 내용이며, Sudheer Jonna 로 부터 번역 허락을 받았음을 알립니다. 이 글을 읽고, 면접 뿐만 아니라 자바스크립트의 기본 및 심화 개념을 잡는데 도움이 되었으면 좋겠습니다. 영어 전공자가 아니므로, 오역 또는 제 나름대로의 직역이 있습니다. 리액트에서 가장 큰 특징으로는 다음과 같다. 1. 연산에 상대적으로 많이 소요되는 RealDOM을 사용하지 않고 VirtualDOM을 사용한다 2. SSR (Server Side Rendering) 을 지원한다. 3. 단방향 데이터 바인딩을 따른다. 4. 화면을 개발하기 위해 재사용 가능한 UI 컴포넌트를 사용한다. [면접질문 #1] What is React? - 리액트란 무엇인가 아래 글은 https://github.com/sudheerj/reactjs-interview-questions 에서 번역한 내용이며, Sudheer Jonna 로 부터 번역 허락을 받았음을 알립니다. 이 글을 읽고, 면접 뿐만 아니라 자바스크립트의 기본 및 심화 개념을 잡는데 도움이 되었으면 좋겠습니다. 영어 전공자가 아니므로, 오역 또는 제 나름대로의 직역이 있습니다. 리액트는는 사용자 인터페이스를 좀 더 쉽게 구성하기 위해 사용되어지는 오픈 소스 프론트엔드 자바스크립트 라이브러리이다. 리액트는 웹과 앱에 view layer를 처리하기 위해 사용되어 진다. 그리고 이것은 Facebook에서 일하고 있는 Jordan Walke라는 사람으로부터 탄생했다. 리액트는 처음으로 페이스북 news feed 201.. 이전 1 다음
