Phot_o_matic Programming

props는 부모 컴포넌트가 자식 컴포넌트에게 어떠한 data를 내려주는 것을 말한다. 이 때, data는 다양한 형태의 값으로 넘겨줄 수 있다. number, string 같은 primitive 값은 물론이고 function도 넘겨줄 수 있다. props를 활용하면 컴포넌트 간 관계를 명확히 하여, 각 상태에 따라 원하는 동작을 할 수 있게 만들 수 있다. 하지만 props 개수가 많아지고 컴포넌트의 구조가 복잡해질수록 props만으로는 해결이 되지 않는 경우가 발생한다. 간단한 예시를 통하여 생각해보자. 컴포넌트 구조와 같은 모양의 가계도를 그려 보았다. "나"를 기준으로 생각을 해 본다. 나의 state 변화 만년백수이던 "나"는 드디어 취업을 했다. (state === '백수' 에서..

Programming/Mindchain 2019. 8. 20. 21:20

vue에서도 react처럼 자식 컴포넌트에게 props를 넘겨줄 수 있다. 자식 컴포넌트에서는 부모가 내려준 props를, 자신의 data로 사용할 수도 있고 조건부 렌더링의 조건으로만 사용할 수도 있을 것이다. 부모 컴포넌트 Parent.vue Passing props by static way &lttemplate> &ltdiv> &ltChild msg="giveprops">&lt/Child> 위아래 모두 같은 값을 다른 표현으로 props 넘겨주고 있다. &ltChild :msg="giveprops">&lt/Child> &lt/div> &lt/template> 부모로부터 변동되지 않는 값을 자식에게 넘겨줄 땐, 정적인 props로 넘겨준다. Passing Dynamic props way &lttemp..

Programming/Vue 2019. 8. 3. 19:08

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

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