개발의 시작과 끝

비구조화 할당 const Myname = ({ name }) => { return 안녕하세요! 제 이름은 {name} 입니다. }; Myname.defaultProps = { name: 'developer' }; 출력 값 : 안녕하세요! 제 이름은 developer 입니다. 위의 컴포넌트는 함수형 컴포넌트로 ({ name })은 객체 형태의 파라미터로 객체 내부에 있는 name 값은 props로 받아와서 값을 사용하는 구조이다. 함수형 컴포넌트와 클래스형 컴포넌트의 차이점은 State와 LifeCycle의 기능이 빠져있다. 함수형 컴포넌트는 초기 마운트 속도가 미세하게 빠르고 불필요한 기능이 없어서 메모리 자원도 덜 사용한다. 그 때문에 단순히 어떤 값을 받아와서 보여주기만 하는 용도일 때 주로 사용한다..

Webpack 코드들을 의존하는 순서대로 잘 합쳐서 하나 또는 여러 개의 파일로 결과물을 만들어낸다. 웹 프로젝를 만들 때 전체적으로 파일들을 관리해주는 도구이다. 참고 - nesoy.github.io/articles/2019-02/Webpack - www.youtube.com/watch?v=Op0EE8v7qEs&list=PL9FpF_z-xR_E4rxYMMZx5cOpwaiwCzWUH&index=5

Virtual DOM 가상의 돔으로 실제 브라우저 돔에 새로운 것을 넣는 것이 아니라 자바스크립트로 이루어진 가상의 돔에 한 번 렌더링을 하고 기존의 돔과 비교를 한 다음에 정말 변화가 필요한 곳에만 업데이트를 해주는 것이다. 참고 - www.youtube.com/watch?v=wKwMRH0PkMg&list=PL9FpF_z-xR_E4rxYMMZx5cOpwaiwCzWUH&index=3

Component Mapping map() 파라미터로 전달 된 함수를 통하여 배열 내의 각 요소를 처리해서 그 결과로 새로운 배열을 생성한다. arr.map(callback, [thisArg]) callback - 새로운 배열의 요소를 생성하는 함수로서, 다음 셍가지 인수를 가진다. currentValue - 현재 처리되고 있는 요소 index - 현재 처리되고 있는 요소의 index 값 array 메소드가 불려진 배열 thisArg(선택항목) callback함수 내부에서 사용할 this 값을 설정 ES6 Syntax arrow function (...) => {...} let numbers = [1, 2, 3, 4, 5]; let result = numbers.map((num) => { return n..

state 유동적인 데이터를 보여줄때 사용된다. state를 사용할 때 초기값 설정이 필수이다. 컴포넌트 생성자 메소드인 constructor에서 this.state = {}로 설정한다. JSX 내부에 { this.state.stateName }라고 넣는다. 값을 수정할 때에는 this.setState({ ... })를 쓰고, 렌더링이 된 다음엔 this.state = 를 절대 사용하면 안된다. state는 내부에서 변경할 수 있다. 변경할 때는 언제나 setState 라는 함수를 사용해야 한다. See the Pen react state by 김혜지 (@hjyee) on CodePen. 참고 - www.youtube.com/watch?v=mYEZh6TV10M&list=PL9FpF_z-xR_E4rxYMM..

pops 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용된다. 컴포넌트 내부의 Immutable Data로 즉, 변하지 않는 데이터를 처리할 때 사용된다. JSX 내부에 { this.pops.propsName }라고 넣고 컴포넌트를 사용할 때, 괄호 안에 propsName="value"이라고 작성을 하면 된다. this.props.children은 기본적으로 가진 props로서, 여기에 있는 값이 들어간다. See the Pen react-first by 김혜지 (@hjyee) on CodePen. 참고 - www.youtube.com/watch?v=tZLQ-cNCf70&list=PL9FpF_z-xR_E4rxYMMZx5cOpwaiwCzWUH&index=8 - www.youtube.com/wa..

JSX 자바스크립트 문법의 확장판으로 마치 자바스크립트와 HTML을 한 번에 합쳐 놓은 것 같은 문법이다. 1. Nested Element - 모든 JSX의 코드는 container element 안에 포함해야 한다. - 무언가로 감싸야만 코드가 정상적으로 작동한다. 2. JavaScript Expression - JS를 표현하려면 {}로 wrapping 하면 된다. 3. Inline Style - style을 설정할 때는 key가 camelCase인 객체가 사용된다. 4. Comments - 주석을 작성할 때는 { /*...*/ } 형식으로 작성한다. - 주의할 점은 주석 역시 container element 안에 작성되어야 한다. See the Pen react-first by 김혜지 (@hjyee)..

생활코딩 19.8강 - create 구현 : immutable 원본은 그대로 둔 채로 원본을 복사하는 방식이다. 구현을 단순하게 유지해서 더 높은 복잡성에 도전하기 위한 노력이다. 배열 var a = [1,2]; var b = Array.from(a); 출력 값 => a[1,2] b[1,2] // 값은 같지만 둘은 다르다 b.push(3); 출력 값 => a[1,2] b[1,2,3] 객체 var a = {name:'egoing'}; var a = Object.assign({},a); 출력 값 => a{name: "egoing"} b{name: "egoing"} // 값은 같지만 둘은 다르다. b.name = 'leezche'; 출력 값 => a{name: "egoing"} b{name: "leezche"..