본문 바로가기

개발공부61

[React]-React로 사고하기 본문은 React Document 를 바탕으로 작성하였다. React로 사고하기 1단계 : UI를 컴포넌트 계층 구조로 나누기 어떤 것이 컴포넌트가 되어야 할지 어떻게 알 수 있을까? 새로운 함수나 객체를 만들 때 처럼 만들면 된다. 한 가지 테크닉은 단일 책임 원칙이다. 이는 하나의 컴포넌트는 한 가지 일을 하는게 이상적 이라는 원칙이다. 2단계 : React로 정적인 버전 만들기 컴포넌트 계층 구조가 만들어 졌으니 앱을 실제로 구현해 볼 시간이다. 가장 쉬운 방법은 데이터 모델을 가지고 UI만 렌더링 하고 아무런 동작도 없는 버전을 만들어 보는 것 이다. 정적 버전을 만드는 것은 생각은 적게 필요하지만 타이핑은 많이 필요로 하고, 동작들이 수행되는 상호작용을 만드는 것은 생각은 많이 필요하지만 타이핑.. 2020. 8. 18.
[React]-리스트와 Key 본문 내용은 React Document 를 바탕으로 작성 되었다. 리스트와 Key function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => {number} ); return ( {listItems} ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') );위와 같이 number list 를 표현 할 수 있다. 다만, 주의 해야 할 점은 위의 를 나타내는 부분에서 ... {number} ...위 와 같이 key값이 없이 작성을 하게 되면 각 항목에 key 를 넣어야.. 2020. 8. 18.
[React]-조건부 렌더링 아래 글은 React Document 를 바탕으로 작성되었다. 조건부 렌더링 React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다. 이렇게 하면 애플리케이션의 상태에 따라 컴포넌트 중 몇 개 만을 렌더링 할 수 있다. React에서 조건부 렌더링은 javaScript에서의 조건 처리와 같이 동작한다. if나 조건부 연산자(삼항 연산자) 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는데 사용해라. 그러면 React는 현재 상태에 맞게 UI를 업데이트 할 것이다. 요약 : if나 삼항 연산자를 사용해 조건부 렌더링이 가능하다 이 컴포넌트는 현재 상태에 맞게 이나 을 렌더링 한다. class LoginControl extends React.Component { cons.. 2020. 8. 18.
[React]-이벤트 처리하기 아래 글은 React Document 를 바탕으로 만들어 졌다. 이벤트 처리하기 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다. 문법 차이는 아래와 같다. React의 이벤트는 소문자 대신 camelCase 를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. // normal DOM Activate Lasers // React Activate Lasers React 에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출해야 한다. // HTML Click me // React function ActionLink() { function handleClick(e) .. 2020. 8. 18.
[React]-Component와 Props 아래 내용은 React Document 를 바탕으로 작성되었습니다. Component와 Props 컴포넌트를 사용해 UI를 재사용이 가능한 여러 조각으로 나누고 각 조각을 개별적으로 살펴볼 수 있다. 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 함수 컴포넌트와 클래스 컴포넌트 function Welcome(props){ return Hello, {props.name} } 이 함수는 데이터를 가진 하나의 props 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이러한 컴포넌트를 함수 컴포넌트 라고 한다. 또한 ES6 class를 사용하여 컴포.. 2020. 8. 18.
[React] - 엘리먼트 렌더링 아래 내용은 React Document 를 바탕으로 만들어졌다. 엘리먼트 렌더링 엘리먼트는 React 앱의 가장 작은 단위 이다. 엘리먼트는 컴포넌트의 구성 요소 이다. 엘리먼트는 화면에 표시할 내용을 기술한다. const element = Hello, world;브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있다. *React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다. * 추가 예정 DOM에 엘리먼트 렌더링 하기 root 안에 들어가는 모든 엘리먼트를 React DOM 에서 관리한다. 이걸 루트(root) DOM 노드 라고 부른다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. Reac.. 2020. 8. 17.

티스토리툴바