React에서 ref를 사용하는 경우 컴포넌트 내부에서 DOM에 직접 접근해야 할 때 ref라는 것을 사용한다. ref란 본래 html과 css, js를 쓸때 id값을 주고 그 DOM에 직접 접근해서 스타일을 바꿔주거나, 이벤트를 처리시키던 것을 리액트 스타일대로 해주는 것이라고 생각하면 편하다. 리액트는 재사용성이 중요하기 때문에, 리액트 컴포넌트에 id 값을 주면 동일한 아이디가 존재할 가능성이 생기므로 id값은 사용하지 않는게 좋고, 만약 사용해야 한다면 반드시 겹치지 않게 신경써서 짜야한다. ref를 써야하는 경우는 당연히 특정 input이나 box를 기준으로 효과를 주고자 할때, this를 활용해서 ref를 입혀주고 나중에 부모 컴포넌트에서 그 ref를 활용해서 해당하는 ref를 가진 자식 컴포넌트를 조작할수 있다. 컴포넌트끼리 데.. Javascript ES6 비구조화 할당 이란? 비구조화 할당(destructuring assignment) 구조 분해 문법이라고도 불리며, 함수의 파라미터 부분에서도 사용 가능. const [apple, banana, grape] = ["Apple", "Banana", "Grape"]; console.log(apple); // Apple console.log(banana); // Banana console.log(grape); // Grape 이런식으로 선언과 동시에 바로 할당까지 해버리는걸 비구조 할당이라고 한다. 원래 자바 스크립트의 배열은 변수에 담아서 쓰고 싶을때 하나씩 할당을 해주는 노가다성 작업이 필요했는데 이걸 단축시키는 패턴으로 작성하는것이 비구조화 할당이다. 또는 구조분해 할당. 리액트에서는 import React from 'reac.. 리액트(React) JSX의 개념과 문법 정리 JSX란? JSX는 리액트에서 사용하는 문법인데, 특징은 가독성이 좋게 HTML과 자바스크립트를 표현할 수 있다는 점이다. 원래 자바스크립트는 HTML상에 직접 넣으면 너무 하드코딩이 되기 때문에, 태그 최하단에 를 배치하여 표현하거나 따로 파일로 분리를 했었다. 그래서 자신이 짠 코드가 아니라 타인의 코드를 보면 어떤 이벤트에 연결되는 조건식이 무엇인지 위아래로 또는 다른 파일을 왔다갔다하면서 확인해야만 했다. 그에 반헤 JSX는 비교적 한눈에 그 구조가 파악이 되는 것 같다. import의 원리 import React from 'react' Create React App같은 것을 이용하여 리액트 프로젝트를 만들 때 node_modules라는 디렉토리가 생성이 되는데 거기에 react 모듈이 같이 들어.. 이전 1 2 3 4 5 다음
