ttaeng_99 's 개발의 흔적들 ttaeng_99 's 개발의 흔적들

props

• [Vue.js] 컴포넌트(Component), Props & Event

  Front-End(Web)/Vue 2021. 5. 26. 21:04

  이번에는 비교적 친숙한! 뷰의 컴포넌트 개념에 대해 알아보고자 한다. React와 마찬가지로 화면을 구성하는 요소이다. 현대의 모던 프레임워크들은 대부분 컴포넌트 개념을 차용하고 있기 때문에 뷰 역시 이를 기반으로 하고 있는 것 같다. 컴포넌트와 관련된 개념과 영상이 많기 때문에 포스팅 분량이 길어지고 몇 부분으로 나눠질 것 같다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue 컴포넌트 React와 마찬가지로 화면을 영역 단위로 쪼개서, 재사용 가능한 코드로 캡슐화하는 개념이다. 뷰에서 컴포넌트를 등록하는 방법은 2가지가 있다. 전역 등록, 지역 등록이 바로 그것들이다. - 전역 컴포넌트 // 전역 컴포넌트 Vue.component('컴포넌트..

  Read More
• [React] 공식문서 학습(문서) : 주요 개념

  Front-End(Web)/React - 프레임워크(React, Next) 2021. 4. 28. 18:25

  🧐 서론 문서의 첫 시작이었던 설치는 아무래도 개발보다는 전반적인 소개에 가까웠다. 이 주요개념을 공부하는 것이 React를 시작하며 허술했던 기반을 다져줄 수 있을거라 기대된다! (분량이 많다면 나누어야할듯) 💙 설치 1. Hello World ReactDOM.render( Hello, world!, document.getElementById('root') ); 모든 언어와 프레임워크를 시작하면 "Hello World" 출력이 첫 걸음이다. 이 역시, React의 가장 기본적인 조작으로 "Hello, world!" 글귀의 제목 엘리먼트(혹은 요소, 태그 등) 를 렌더링한 모습이다. 2. JSX 소개 const element = Hello, world!; React 컴포넌트가 반환해야 할 형태이며, 이는..

  Read More
• [Day 13] UX(User Experience), React(State, Props)

  카테고리 없음 2020. 12. 31. 12:11

  🤔 서론 오늘은 세션들과 시험이 많이 구성되어 있지만, UX와 더불어 React의 핵심이라 할 수 있는 State, Props 세션에선 특히 집중해야겠다. 🥋 CodeKata : Day 03 3주차 코드카타 리뷰 : abangpa1ace.tistory.com/47 [CodeKata] wecode 3주차 코드카타 🤔 서론 레플릿으로, 알고리즘을 1일 1문제를 푸는 세션이다. 시작하기에 앞서, 뜬금없지만 코드카타 'Kata' 의 어원이 궁금해졌다. 먼저, Codekata의 뜻은 프로그래머가 연습과 반복을 통해 기술을 abangpa1ace.tistory.com 🧑‍💻 Session : UX와 웹 개발 1. 웹사이트의 발전 정보량 과다, 문서 이상의 매체 다양한 디바이스들의 등장 복잡해진 화면, 정보를 보다 빠..

  Read More
• [React.js] Stateful vs Stateless Components

  Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 29. 19:21

  🤷 Component의 다른 분류방법 우리는 컴포넌트의 형식에 따라, 클래스형 컴포넌트 & 함수형 컴포넌트로 분류해서 공부했다. 이 둘의 가장 큰 차이는, 구문형식과 더불어 state의 사용가능 여부에 있었다. (클래스는 가능, 함수는 불가) 이러한 단점의 보완을 위해, 함수형 컴포넌트에는 Hooks 기능이 추가되었다. 반대로, 클래스형 컴포넌트라고 해서 반드시 state를 가지고 있는 것은 아니다. 이에 따라, 컴포넌트를 stateful / stateless 두 종류로도 나누는 것 같다. 이에 대해 공부해보았다. 📒 Stateless & Stateful Component Stateless 컴포넌트(Child)와 Stateful 컴포넌트(Parent)를 클래스형으로 각각 코드해보았다. //📂Child.j..

  Read More
• [React.js] Props

  Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 26. 20:49

  🤷 Props(Properties) 란? 컴포넌트의 정보를 가지고 있는 객체(Object)이다. 상위 컴퍼넌트가 하위 컴퍼넌트에게 전달하는 용도로 주로 사용된다.(반대는 불가!) 📒 Props 선언 및 표시 JSX의 속성과 같이 선언할 수 있으며, 'this.props.속성명'으로 render() 함수에서 표현 가능하다. import React from 'react'; import ReactDOM from 'react-dom'; class Greeting extends React.Component { render() { return Hi there, {this.props.firstName}!;// props 표현 } } ReactDOM.render( ,// props firstName 선언 documen..

  Read More