IT_susu

리액트에서 이벤트를 사용하는 방법을 알아봅시다. 역시 이벤트 사용법도 DOM 엘리먼트에서 이벤트를 처리하는 방법과 많이 비슷하면서 조금 다릅니다. react의 이벤트는 소문자가 아니라 camelCase 사용 jsx를 사용하여 문자열로 함수명(); 아닌 함수 값 으로 이벤트 핸들러 전달 return false를 이벤트 리스너 안에 사용해도 기본 동작을 방지할 수 없어 꼭 preventDefault를 명시적으로 호출해야 함 이벤트 리스너에 있는 파라미터는 리액트에서 제공하는 합성이벤트입니다. (실제 이벤트 객체가 아님) 클래스 컴포넌트의 경우, 이벤트리스너를 등록할 때 this의 처리가 문제가 됩니다. javascript에서 클래스 메서드는 this바인딩이 되어 있지 않으므로 명시적으로 표현을 해줘야 합니다..

1. ref Dom노드나 react 엘리먼트에 접근하는 방법을 제공 원래 리엑트에서는 데이터의 흐름을 가지고 순간적인 dom의 모습을 그려내는 방식이지만, 직접적으로 해당 자식을 수정해야 하는 경우가 있습니다. 이 때, 수정할 자식이 react 컴포넌트의 인스턴스일 수도 있고, dom 엘리먼트일 수도 있습니다. 이는 리액트의 일반적인 흐름방식이 아니라서 남용은 좋지 않습니다. 최대한 자제하는 방식으로 사용하는 것에 유념하면서 ref를 사용하여 이들에게 접근하는 방법을 알아봅시다. 2. 사용 사례 - 포커스, 텍스트 선택영역, 미디어의 재생 - 애니메이션 직접적 실행 - 서드파티 돔 라이브러리를 react와 같이 사용할 때 3. Ref 생성 React.createRef(); class MyComponent..

비구조화 할당이란? 객체나 배열에서 값을 빼와서 새로운 변수에 할당하는 과정을 기존의 문법보다 좀 더 간결하고 깔끔하게 작성하는 방법. [1] 배열의 해체 할당 let Arr = ['a', 'b', 'c']; let [, second] = Arr; console.log(second); // 'b' - rest parameter와 섞어서 사용 const arr = [1,2,3,4,5]; const [a, ...b] = arr; const [ , , ...c] = arr; - 기본값 적용 const [a = 10, b = 20] = []; // a = 10, b = 20 const [ c, d = c * 2] = [5]; // d = 10 - 값을 서로 바꿀 때 let a = 10; let b = 20; [..

새로운 함수 표현 방식입니다. [1] 표현 방식의 차이 // before function before() { return 'test' } // after const before = () => 'test'; 파라미터가 한개면 ()를 생략할 수 있고, 함수 스코프 안에 return값만 있다면 {}와 return을 생략할 수 있습니다. 그런데 객체의 경우는, 함수 스코프와 객체를 표현하는 {}가 똑같이 생겨서 혼란이 오므로, 예외적으로 객체만 리턴하는경우는 ()로 {}를 대체합니다. //before function e(x) { return {x:x} } // after const e = x => ({x}) 함수를 리턴하는 경우 생김새도 특이해서 남겨둠. // before var f = function(a) {..

1. useState useState는 state를 설정해 주는 함수입니다. const [count, setCount] = useState(0); setCount(count++); useState의 인자값에 state의 기본값을 넣어줄 수 있으며, 첫번째 변수는 state 변수, 두번째는 이 state를 제어하는 함수(세터함수)입니다. 기존의 state는 꼭 객체형식이어야 했고, this.setState는 기존의 state값들과 바뀐 값을 합쳤다면, useState는 객체가 아니어도 되며, 기존의 state들과 값을 병합하지 않고 대체합니다. 2. useEffect side effect 작업들을 도와주는 함수. componentDidMount, componentDidUpdate, componentWill..

react. 16.8버전부터 hook을 지원하기 시작했습니다. hook은 함수형의 상태 관리 지원이며, class에서만 가능했던 state, lifecycle API 사용을 가능하게 해줍니다. 하위호완성을 갖고 있기 때문에 기존 코드를 굳이 바꾸지 않아도 됩니다. 병행해서 사용이 가능합니다. 그럼 난데없이 튀어나온 것 같은 hook은 얼마나 많이 바뀐거야? 하며 머리를 감쌀 수도 있습니다만, 그동안 함수형에서 불가능했던 것들이 가능해진 부분만 새로 공부한다고 생각하시면 됩니다. 아예 새롭게 뭐가 나오는 것은 아니라는 거죠. 겁먹지말고 하나씩 알아봅시다! hook으로 인한 변화들. - 이젠 지나간 사실이 된 내용들 클래스는 함수형보다 더 많은 기능을 제공한다. 함수형 컴포넌트가 클래스 컴포넌트보다 성능이 ..

리액트 위주로 설명. 내가 생각할 때 리액트가 생겨남으로 인해 가장 큰 변화는 기존 프론트엔드개발의 단위를 바꾸었다는 점이다. 기존에는 페이지 단위로 개발을 진행했었고, 페이지를 기준으로 코드의 유효성을 생각할 수 있었다. 그런데 리액트는 컴포넌트를 기준으로 프로그램을 생각한다. 유효성은 컴포넌트에 한정될 수도, 전역적일 수도 있다. 이는 하나만 생각하면 되던 것이 다방면으로 생각할 것이 늘어난 것과도 같다. 그 페이지 내에서의 동작만 신경쓰다가, 이 컴포넌트가 어디에 쓰여도 잘 융화될 수 있도록 코드를 짜야 한다. 어찌보면 유지보수의 실력은 많이 늘 것 같다. 기존의 한계를 뛰어넘게 하기 위해 제이쿼리만 쓰던 시대보다는 많은 것을 새로 알아야 한다. 아직은 js의 최신 문법을 브라우저가 따라오지 못하기..

react 공식문서 메인컨셉 12. react로 생각하기 1. UI를 컴포넌트 계층으로 분해하기 디자인 파일 위에 모든 컴포넌트를 박스칠하고 이름을 지어줍니다. 컴포넌트를 결정하는 방법은 하나의 컴포넌트는 한가지 일만 하는 것을 원칙으로 나누는 것입니다. 나는 컴포넌트들을 계층으로(트리) 나타내봅시다. 2. 정적인 버전의 react 만들기 상호작용이 없는 (값의 변화라던가 state같은) 버전을 먼저 만듭니다. 생각은 적고 타이핑이 많은 부분이며 쉽기 때문입니다. 이 단계에서는 props는 사용하되, state를 사용하지 않습니다. 컴포넌트를 구성하는 것은 위아래 방식과 아래위 방식이 있습니다. 큰 프로젝트는 위아래가 더 쉽고, 작은 프로젝트는 아래위가 더 쉽습니다. 3. ui의 상호작용에 필요한 최소한..

react 공식문서 메인컨셉 10. state들어올리기 1. state 들어올리기란? 여러개의 컴포넌트가 동일한 바뀌는 데이터를 공유해야 할 때, 가장 가까운 부모컴포넌트에게 state를 올려 state값을 공유하는 것. 2. 방법 하위 컴포넌트에 각각 존재하던 state값들을 부모에게 받는 props 값으로 바꾸고 부모 컴포넌트에서 state를 계산하여 하위 컴포넌트들에게 값을 넘겨줍니다.

react 공식문서 메인컨셉 11. 합성과 상속 1. react에서 합성이란? 자식 컴포넌트가 무엇이 들어올 지 알지 못하는 상황에서 만들어야 할 때, 두 컴포넌트가 서로 영향을 끼치지 않으면서 합쳐지는 것. 2. 사용방법 1) 한 곳만 합성할 경우 See the Pen ZNzMEq by sujeong91 (@sujeong91) on CodePen. 2) 여러 곳을 합성할 경우 See the Pen JqPaog by sujeong91 (@sujeong91) on CodePen. 3. 사용 예 1) 팝업 컴포넌트 2) 레이아웃 컴포넌트