Je개발 일지

React는 컴포넌트를 엄격하게 순수 함수로 작성하도록 강제한다 그렇기에 React 코드를 짤 때 몇 가지 규칙을 준수해야만 한다. 1. 순수성 : 수식으로서의 컴포넌트 컴퓨터 과학에서 순수 함수는 다음의 특징을 지닌다. 자신의 일에만 신경 쓴다 : 호출되기 전에 존재했던 객체나 변수를 변경하지 않는다 동일한 값을 입력 받으면 항상 동일한 결과를 반환해야 한다. : 컴포넌트가 이런 순수성을 유지한다고 하는 건 어떤 데이터를 받든, 그 데이터를 받을 때마다 항상 동일한 화면을 보여줘야 함을 의미한다. 2. 사이드 이펙트 React 렌더링 프로세스는 항상 순수해야 한다. : 컴포넌트는 JSX 만을 반환해야 한다. : 렌더링 존재한 객체나 변수를 변경해서는 안 된다. let guest = 0; function..

Javascript 배열 메서드를 활용해서 데이터 배열을 조작할 수 있다 1. 배열에서 데이터 렌더링하기 Creola Katherine Johnson: mathematician Mario José Molina-Pasquel Henríquez: chemist Mohammad Abdus Salam: physicist Percy Lavon Julian: chemist Subrahmanyan Chandrasekhar: astrophysicist 이런 목록 항목의 유일한 차이점은 콘텐츠, 즉 데이터다 이런 데이터들을 자바스크립트 배열에 저장하고, map 이나 filter 등을 사용해 컴포넌트 목록을 렌더링할 수 있다. Step 1) 데이터를 배열에 넣기 const people = [ 'Creola Katherin..

컴포넌트는 서로 다른 조건에 따라 다른 것을 보여줘야 하는 경우가 종종 발생한다 1. 조건부로 반환하는 JSX 상품이 포장됐는지를 표시하는 여러 컴포넌트를 렌더링하는 컴포넌트가 있다고 가정해보자. function Item({ name, isPacked }) { return {name}; } export default function PackingList() { return ( Sally Ride's Packing List ); } 여기서 Item 컴포넌트에 isPacked prop 이 true 인 경우, 패킹된 아이템에 체크 표시를 추가하고자 한다면 if/else 구문으로 렌더링할 수 있을 것 if (isPacked) { return {name} ✔; } return {name}; 위 방법은 isPack..

[ Reference ] https://vuejs.org/guide/essentials/component-basics.html 컴포넌트는 UI 를 독립적이고 재사용 가능한 방향으로 사용할 수 있도록 도와준다. App 을 구성할 때 컴포넌트를 중첩해서 사용하는 것은 일반적인 형태다 컴포넌트를 중첨ㅂ해서 사용하는 것은 일반 HTML 을 사용하는 것과 유사해 보인다. 하지만 Vue 는 독자적인 컴포넌트 모델을 사용하고 있으며 개발자가 작성한 컨텐츠나 로직을 각 컴포넌트에서 캡슐화할 수 있다. 1. Defining a Component build 의 과정을 거친다면, 우리는 보통 ** .vue ** 확장자(이 확장자가 SFC 를 의미) 를 사용해서 Vue 컴포넌트를 만들 것이다. You clicked me {{..

[ Reference ] https://vuejs.org/guide/essentials/template-refs.html Template Refs | Vue.js vuejs.org Vue 의 선언적 렌더링은 대부분 직접적인 DOM 작업을 추상적으로 실행하지만(* 간접적으로 실행한다는 의미) 일을 하다 보면 실제 DOM element에 직접 접근해야할 때가 있다. 이런 경우에는 ** ref ** 의 특별한 속성을 사용해서 해결할 수 있다. ** ref ** 는 ** v-for ** 의 ** key ** 속성과 비슷한 특수 속성이다. 특정 DOM element, 혹은 하위 구성 element 인스턴스를 마운트된 이후에 이를 직접 참조할 수 있도록 도와준다. 타사 라이브러리를 초기화할 때도 이런 방법은 유용할..

[ Reference ] https://vuejs.org/guide/essentials/watchers.html Watchers | Vue.js vuejs.org 1. Basic Example Vue 에서는 ** computed ** 를 이용해서 값을 선언적으로 계산할 수 있다. 하지만 상태 변화에 따라 발생하는 사이드 이펙트를 다뤄야하는 상황이 발생하기도 한다. 예를 들어서 DOM 을 조작한다고 할 때, 혹은 비동기 연산의 결과에 따라 다른 상태를 변경해야하는 것 등이 있다. 이런 경우 Composition API 의 watch 함수를 사용하면 반응성 있는 상태가 변경될 때마다 콜백 함수를 실행할 수 있다. Ask a yes/no question: {{ answer }} (* 위의 예제 코드를 잠깐 해..

[ Reference ] https://vuejs.org/guide/essentials/lifecycle.html Lifecycle Hooks | Vue.js vuejs.org https://vuejs.org/api/composition-api-lifecycle.html Composition API: Lifecycle Hooks | Vue.js vuejs.org 원래는 Essentials 의 내용만을 적고 상세한 내용들은 다음에 옮기려고 했으나 이번에는 이 두 가지를 한 번에 같이 하는 것이 더 효율적이라는 생각이 들어서 함께 사용하기로 했다. !! 주의점: 여기에서 설명하는 라이플 사이클 hook은 모두 Composition API 에서만 사용하는 것들입니다. Options API 의 라이플 사이클 훅..

[ Reference ] https://vuejs.org/guide/essentials/forms.html Form Input Bindings | Vue.js vuejs.org 1. Basic Usage Text Message is: {{ message }} ** v-model ** 을 사용할 때 주의할 점은 IME 가 필요한 언어, 즉 한글은 작성하고 있는 중에 업데이트 되지 않는다. 쉽게 설명하면 한 글자로 업데이트가 되며, 키를 입력하는 자음, 모음 각각 하나에 반응해서 업데이트 되지 않다는 말이다. 그렇기에 한글을 사용할 때 사용자의 경험을 제대로 주고 싶다면 input 태그에 이벤트를 발생시켜서 이벤트 핸들러로 데이터를 바인딩 하는 방식이 필요하다. {{ msg3 }} Multiline Text..

[ Reference ] https://vuejs.org/guide/essentials/event-handling.html Event Handling | Vue.js vuejs.org 1. Listening to Events 이벤트를 실행하기 위해서 ** v-on ** 이라는 디렉티브를 사용할 수 있다. ** v-bind ** 를 ** : ** 로 축약할 수 있듯이 ** v-on ** 은 축약형으로 ** @ ** 을 사용할 수 있다. 이벤트 핸들러를 사용하는데는 두 가지의 방법이 있다. 첫 번째는 Inline, 두 번째는 Method 다. 2. Inline Handlers Inline handler 는 굉장히 간단하고 전형적인 방식이다. const count = ref(0) Add 1 Count is: ..

[ Reference ] https://vuejs.org/guide/essentials/list.html List Rendering | Vue.js vuejs.org 1. v-for ** v-for ** 디렉티브는 배열에서 item들을 렌더링할 때 사용할 수 있다. ** v-for ** 디렉티브는 ** item in items ** 라는특별한 구문을 필요로 한다. 여기서 items 는 array 를 의미하고 item 은 각 array 의 요소 별칭이다. const items = ref([{ message: 'Foo' }, { message: 'Bar' }]) {{ item.message }} ** v-for ** 는 상위 범위 속성에 모두 접근할 수 있고, 내부에서 만들 수 있는 두 번째 별칭은 inde..