Phot_o_matic Programming

recast.ly는 Youtube API를 이용하여 실제 youtube처럼 검색 및 동영상 시청이 가능하도록 만드는 sprint이다. 실제로 끝마치고 되돌아보니, react를 사용한 첫 sprint로 도전하기에 아주 제격이라는 생각이 들었다. sprint를 진행하기에 앞서, react의 핵심 개념을 짚고 넘어가야만 한다. stateless functional component & stateful classical component의 차이 props flow & state life cycle & life cycle method Component stateful classical component를 사용하는 경우는 명료하다. 어떤 state를 지정해서 관리하는 경우 life cycle method(compo..

Programming/React 2019. 6. 14. 20:32

리액트란 무엇인가? : Javascript의 라이브러리로써, 선언적인 component와 재사용 가능한 component를 기반으로 구축된다. JSX에서 Javscript의 변수 name이라는 것을 사용하려면? : Hello, {name} props란? : props 원소의 이름을 특정지을 수 있다. state의 특징은? : 자신이 아닌 다른 컴포넌트의 state는 알 수 없다. 만약 다른 컴포넌트의 state에 뭔가 영향을 주고 싶다면, 부모 컴포넌트까지 가서 setState 시킨 값을 내려주어야 한다. 급할수록 돌아가야 한다! functional component와 비교하여 class component의 차이점은? Life Cycle API를 사용할 수 있다. state를 가진다. React.Comp..

Programming/React 2019. 6. 14. 19:38

component를 통하여 UI를 재사용 가능한 별개의 조각조각들로 나누고, 각 조각을 개별적으로 살펴볼 수 있게 된다. 개념적으로 component는 Javascript의 함수와 유사하다. "props" 라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React element를 반환한다. functional components & class components component를 정의하는 가장 간단한 방법은 Javascript 함수를 작성하는 것이다. function Welcome(props) { return &lth1>Hello, {props.name}&lt/h1> } props는 속성을 나타내는 데이터이다. 위의 함수 Welcome은 데이터를 가진 하나의 props 객체 인자..

Programming/React 2019. 6. 11. 15:16

Element란? Element는 React 앱의 가장 작은 단위이다. Element는 화면에 표시할 내용을 기술한다. Component와 혼동하여서는 안 된다. Rendering Elements in DOM HTML 파일 내부에 가 있다고 가정해보자. &ltdiv id="root"&gt&lt/div&gt 이 안에 들어가는 모든 element를 React DOM에서 관리하므로, 이것을 root DOM node 라고 부른다. React로 구현된 앱은 일반적으로 하나의 root DOM node가 있다. React element를 root DOM node에 render하려면 둘 다 ReactDOM.render() 에 전달해주면 된다. const element = &lth1>Hello, world&lt/h1>;..

Programming/React 2019. 6. 11. 14:34

JSX JSX는 javascript의 확장판이라고 생각하면 된다. React 내에서 사용되며, 몇 가지 기본적인 규칙이 있다. 반드시 하나의 element로 감싸야 한다. Javascript 코드를 적용할 땐 {} 안에 작성해야 한다. JSX 내부에선 if 문을 사용할 수 없다! (IIFE or ternary operator 사용) Element에 class를 적용시킬 때에는 className으로 적용시킨다. JSX에 표현식 포함하기 function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Sangwoo', lastName: 'Kim' }; const element = ( &lth..

Programming/React 2019. 6. 11. 14:14

Achievement Goals React 같은 component 기반 라이브러리를 왜 사용해야 하는지 이해할 수 있다 React components를 만들 수 있다 React code에서 JSX와 ES6를 사용할 수 있다 props를 이용할 수 있다 왜 state가 존재하고, 어떻게 state를 업데이트 하는지 설명할 수 있다 React components에서 user events를 handle 할 수 있다 stateless functional components와 class components 사이의 차이점을 설명할 수 있다 3rd party API를 활용할 수 있다 여러 파일에 걸쳐 많은 모듈을 가지고 있는 큰 코드베이스에서도 전체적인 구조를 이해하고 개발할 수 있다 시작하기 전에! React 공식..

Programming/React 2019. 6. 11. 12:58