목록문법 (4)
함께 성장하는 프로독학러
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 React.js의 중요한 개념 중 하나인 props 에 대해서 알아보도록 하겠습니다. props 는 간단히 말하면 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 것입니다.그 전달을 HTML 의 properties 와 비슷한 방식으로 하는 것을 의미합니다.HTML 의 properties 방식과 바슷하여 props라고 이름이 지어진게 아닐까 생각도 되어집니다. 먼저, props의 기본 개념부터 살펴보겠습니다. 예제를 통해서 살펴보도록 합시다.우리는 이전 포스팅에서 만들었던 Test_comp 컴포넌트 하위에 Test_props 컴포넌트를 만들어 값을 전달해 줄 것입니다. 이를 위해 먼저 Test_props 컴포넌트를 만들어 보겠습니다.src/component..
안녕하세요, 프로독학러입니다. 이번 포스팅 부터 React.js 에 대해서 알아가 보도록 하겠습니다. 가장 먼저 배울 내용은 React Component 입니다. React 프로젝트는 컴포넌트 단위로 구성됩니다.여러 개의 컴포넌트 들이 모여 페이지를 구성하게 됩니다.컴포넌트 별로 파일을 만들어 사용하기 때문에 한 번 정의한 컴포넌트를 프로젝트 내의 다른 곳에서 재사용하기도 편리합니다. 그럼 저희의 프로젝트에서 컴포넌트를 하나 만들어 보도록 하겠습니다. 루트 폴더의 하위 src 폴더의 아래에 components 폴더를 하나 만들어 보겠습니다.(앞으로 만들 컴포넌트들은 모두 이 폴더에 저장할 것입니다)그리고 생성된 components 폴더에 Test_comp.js 파일을 만들고 아래의 코드를 복사, 붙여넣기..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6의 computed property name에 대해서 알아보겠습니다. computed property name 는 객체의 key값을 표현식(변수, 함수 등을 이용)을 통해 지정하는 것입니다.사용법은 아래와 같습니다. var i = 0; var a = { ["foo" + ++i]: i, ["foo" + ++i]: i, ["foo" + ++i]: i };위에서 본 것과 같이 속성명에 표현식을 사용하려면 대괄호("[ ]") 안에 표현식을 쓰면 됩니다.표현식은 위에서와 같이 변수가 들어올 수도 있고, 함수가 들어올 수도 있습니다. 변수가 프로퍼티의 키로 들어오는 예제에 대해서 살펴봅시다. 12345678910var name1 = "장동건";var name2..
안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 ES6의 새로운 기능인 arrow function에 대해서 알아보겠습니다. arrow function은 익명함수를 기존 자바스크립트 문법보다 좀 더 간단하게 표현할 수 있는 방식입니다. 표현식은 다음과 같습니다. const (혹은 let) 변수명 = (파라미터) => { ... 함수 내용 ... } 비교를 위해 기존 자바스크립트에서 익명함수를 변수에 할당하는 것과 비교해 보겠습니다. 123var _addFunc = function(a, b){ return a+b;}cs 다음은 같은 예제를 arrow function을 이용해 만든 것입니다. 123const _addFunc = (a, b) => { return a+b;}cs 훨씬 간단하게 표현할 수 있는 것..