IT/React
-
props 속성IT/React 2020. 6. 5. 21:04
props (properties)는 컴포넌트 속성을 설정할 때 사용한다. 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. props 값은 컴포넌트 함수의 파라미터로 받아 와 사용할 수 있으며, 렌더링 할 때는 { } 기호로 감싸 준다. 만약 name 값을 지정하지 않는다면 안녕하세요, 제 이름은 입니다. 라고 실행된다. 이처럼 props를 지정하지 않고 기본 값을 설정하는 defaultProps는 다음과 같다. 컴포넌트 태그 사이의 내용을 보여주는 props는 children이다. 리액트 를 MyComponent 내부에서 보여주려면 props.children 값을 설정해야 된다. 비구조화 할당 (구조 분해 문법) - 객체에서 값을 추출하는 문법 - 함수의 파라미터 부분에서도 사용할 수..
-
컴포넌트IT/React 2020. 6. 5. 20:42
컴포넌트를 선언하는 방식은 두가지가 있다. ① 함수형 컴포넌트 - 메모리 자원 사용이 클래스형 컴포넌트 보다 덜 사용한다. - 결과물의 파일 크기가 작다. - state, 라이프 사이클 API사용이 불가능하다. ② 클래스형 컴포넌트 - render 함수가 꼭 필요 - state, 라이프 사이클을 사용할 수 있고, 임의 메소드를 정의할 수 있다. 컴포넌트 만드는 과정은 다음과 같다. ① 파일 만들기 ② 코드 작성하기 ③ 모듈 내보내기 및 불러오기 먼저, 함수형 컴포넌트를 사용해 보았다. - 함수형 컴포넌트는 function 키워드를 사용하는 대신 () => {} 를 사용하여 함수를 만든다. - 이 키워드는 함수를 파라미터로 전달할 때 유용하다. - 일반 함수는 자신이 종속된 객체를 this로 가리키지만, ..
-
JSX 문법 2IT/React 2020. 5. 9. 21:27
리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안된다. ⑤ undefined를 렌더링하지 않기 이걸 실행하면 Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null 이런 오류가 발생한다. 오류를 해석해 보면, render에서 아무것도 반환되지 않았으며 일반적으로 return문을 잃어버렸거나, 또는 아무것도 렌더링 하지 않으려면 null을 반환해야 한다. 라는 뜻이다. 이 오류를 수정해보자! 오류를 수정하면 다음과 같은 결과가 출력된다. 어떤 값이 undefined일 수 있다면 OR 연산자를 사용해 해당 값이 un..
-
JSX 문법 1IT/React 2020. 5. 9. 20:29
JSX는 자바스크립트의 확장 문법이고, XML과 매우 비슷 JSX 문법 ① 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함 이렇게 하면 JSX expressions must have one parent element 이런 오류가 뜬다. 그 이유는 무엇일까? 오류를 해석해 보면 "JSX 표현식에는 하나의 상위 요소가 있어야 한다" 라는 뜻이다. 오류에서도 볼 수 있듯이 여러 요소가 있을 땐 부모 요소 하나로 감싸야 한다. 이 코드를 수정해 보자! 다음과 같이 라는 태그로 감싸 주었다. 코드를 수정 하였더니, 오류가 없어지며 다음과 같이 결과가 출력 되었다. ▶ 여러개의 요소를 하나의 요소로 감싸주는 이유는 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 하는 규칙이 있기 때문이다. ..
-
리액트 특징IT/React 2020. 5. 9. 19:49
리액트의 특징 중 하나는 Virtual DMO을 사용 리액트는 오직 뷰만 담당 리액트는 라이브러리임 리액트는 다른 웹 프레임워크나 라이브러리와 혼용할 수 있음 DOM이란? - Document Object Model의 약어 - 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성 - DOM은 트리 형태로 특정 노드를 찾거나 수정, 제거, 원하는 곳에 삽입할 수 있음 - DOM의 단점으로는 동적 UI에 최적화되어 있지 않음 - 리액트는 Virtual DOM방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행함 Virtual DOM - 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링 함 - 이전 Virtual DOM에 있던 내용과 현재 내용..
-
리액트란?IT/React 2020. 5. 9. 19:41
리액트 (React) - 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용 - 오직 View만 신경 쓰는 라이브러리 컴포넌트 (Component) - 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체 - 재사용이 가능한 API - 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의 렌더링 - 사용자 화면에 뷰를 보여주는 것 초기 렌더링 - 맨 처음 어떻게 보일 지를 정하는 초기 렌더링이 필요 render() { ... } - 컴포넌트가 어떻게 생겼는지 정의 - 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환 - 컴포넌트 내부에 또 다른 컴포넌트 삽입 가능 - render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 함 - 렌더링 작업이..