본문 바로가기

분류 전체보기94

[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.
[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. 8. 17.
[Node.js] 기초 아래 포스팅은 inflearn의 Node.js 웹개발로 알아보는 백엔드 자바스크립트의 이해 강의를 바탕으로 공부한 내용을 정리하는 포스팅입니다. 1. npm(Node Project Manager) 설치 sudo apt-get install npm 2. npm init npm init 명령어로 node project를 시작하게 되면 package.json이라는 파일이 하나 생성된다. 이 파일은 내가 해당 node project에서 사용한 dependency들과 각종 info들을 관리해주는 파일이다. 3. Web Server 로는? Node는 다양한 종류의 Web server를 지원한다. 여기서는 express를 사용해서 서버를 구성해보도록 하겠다. node install express --save 위 명령.. 2020. 7. 25.

티스토리툴바