분류 전체보기(89)
-
[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.08.18 -
[React]-조건부 렌더링
아래 글은 React Document 를 바탕으로 작성되었다. 조건부 렌더링 React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다. 이렇게 하면 애플리케이션의 상태에 따라 컴포넌트 중 몇 개 만을 렌더링 할 수 있다. React에서 조건부 렌더링은 javaScript에서의 조건 처리와 같이 동작한다. if나 조건부 연산자(삼항 연산자) 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는데 사용해라. 그러면 React는 현재 상태에 맞게 UI를 업데이트 할 것이다. 요약 : if나 삼항 연산자를 사용해 조건부 렌더링이 가능하다 이 컴포넌트는 현재 상태에 맞게 이나 을 렌더링 한다. class LoginControl extends React.Component { cons..
2020.08.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.08.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.08.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.08.17 -
[React] - JSX
아래 내용은 React Document 를 바탕으로 만들어졌다. JSX const element = Hello, world! JavaScript 를 확장한 문법. JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다. const name = "ddingg" const element = hello {name} ReactDOM.render( element, document.getElementById('root') ); JSX의 중괄호 안에는 모든 JavaScript문법을 넣을 수 있다 자동 세미콜론 삽입을 방지하기 위해 괄호 안에서 작업하는걸 추천한다. return TEST // ... Transform to return; ; TEST; ; // 따라서 괄호 안에..
2020.08.17