본문 바로가기

분류 전체보기

 (86)
React 컴포넌트(Components) 정의 및 렌더링 컴포넌트(Components)? 컴포넌트는 React에서 화면에 표시할 내용들이 모여서 하나의 구역을 이루는 단위이다. 제작할 웹 사이트에서 같은 형식에 다른 값을 가지고 있는 부분을 만들때 유용하다. 위의 사진에서 빨간 박스의 형식이 밑에도 반복되지만 값은 다른것을 확인할 수 있다. 일일히 다 작성할 필요 없이 React에서 컴포넌트로 위와 같은 형식으로 정의하고 재사용 하면서 값만 바꾸면 더 편하게 코드를 작성할 수 있다. 이러한 컴포넌트 여러개가 모이면서 하나의 웹 페이지를 구성하게 되는 것이다. 컴포넌트 정의 방식 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트가 있다. 함수형 컴포넌트 기본 형식 function App() { return ( // HTML이 들어갈 자리 ); } 클래스형 컴포넌트..
JSX를 이용해 React Element 생성 및 렌더링 JSX? JSX는 Javascript를 확장한 문법이며 Javascript + XML 이다. React Element 나 Component를 생성할때 유용하게 사용한다. 사용하는 방법은 Javscript 문법에 XML(HTML)을 넣어서 사용하면 된다. const element = This is JSX; 위와 같이 Javascript 와 XML 같은 문법(HTML)을 같이 사용하는 것이다. XML 같은 문법을 Javascript로 변환해주는데, JSX 만의 규칙을 지키면서 작성해야 한다. 규칙 1. JSX에서 JSX로 만든 Element 객체나 Javascript 값을 사용하기 위해서는 변수를 { } 중괄호 로 감싸야 한다. 규칙 2. JSX에서 XML(HTML)을 넣을 때 항상 닫는 태그가 존재해야된다..
원하는 태그를 화면에 렌더링하는 방법 React 개발 시작 전 기본 셋팅 goormIDE 환경을 이용해 포스팅하였습니다. React 프로젝트를 처음 생성하고 실행시키면 아래와 같이 React에서 만든 기본 페이지가 나오게 된다. 실습을 하려면 저 기본 페이지 부분을 없애야 하므 ludeno-studying.tistory.com 위의 포스팅을 통해 React의 기본 페이지를 완전히 빈 페이지로 만들었으면, 이제 그 빈 페이지를 채워 넣어서 나의 페이지를 만들어야 한다. React에서 화면이 렌더링 되는 과정 먼저, 간단하게 React가 화면을 렌더링 하는 과정을 설명하자면 생성한 React 프로젝트에서 npm run start 나 npm start 를 통해 프로젝트를 실행시키면 public 폴더 내부에 index.html 파일을 실행한 결과로..
React 개발 시작 전 기본 셋팅 React 프로젝트를 처음 생성하고 실행시키면 아래와 같이 React에서 만든 기본 페이지가 나오게 된다. 실습을 하려면 저 기본 페이지 부분을 없애야 하므로, 기본페이지 부분에 해당하는 값들을 전부 제거해 주어야 한다. 일단, 처음 React 프로젝트를 생성하게 되면 위와 같이 3개의 폴더와 4개의 파일이 생성된다. 기본페이지에서 'Edit src/App.js and save to reload.' 라고 나와있듯, 수정해야 할 곳은 src 폴더에 App.js이다. src 폴더 내부를 살펴보면 App.js 파일이 존재한다. 이 파일을 열어서 수정하면 된다. App.js import logo from './logo.svg'; import './App.css'; function App() { return ( ..
Javascript를 이용해 HTML에 동적으로 태그 추가 createElement( ) 원하는 태그를 생성한다 사용법은 아래와 같다 let 변수이름 = document.createElement('태그'); setAttribute( ) createElement( ) 를 이용해 새롭게 만든 태그에 속성과 값을 부여한다 사용법은 아래와 같다 생성한태그변수.setAttribute('속성' , '값'); appendChild( ) 속성까지 부여해준 태그를 지정된 태그의 자식 태그로 넣는다 사용법은 아래와 같다 부모태그.appendChild(생성한태그변수); 사용 예제 See the Pen Javascript를 이용해 HTML에 동적으로 태그 추가 by ludeno (@lluden) on CodePen. 위의 코드는 버튼을 클릭할 때 마다 새롭게 태그와 태그 가 생성되는..
메소드에서 자신이 포함된 객체를 불러오는 'this' this 메소드 내부에서 this를 이용해 자신이 포함된 객체를 불러 올 수 있다. 메소드에서 자신이 포함된 객체의 어떤 값을 필요로 할 떄 유용하게 사용할 수 있다. this 사용법 메소드에서 자신이 포함된 객체를 호출 let Person = { name: "Carl", age: 25, Obj: function(){ console.log(this) } } Person.Obj(); // { name: 'Carl', age: 25, Obj: [Function: Obj] } 메소드 내부에서 this를 이용해 자신의 객체에 접근할 수 있다. 위의 코드에서 Person 객체에 Obj 메소드가 this를 이용해 자신이 포함되어 있는 객체를 출력하고 있다. 메소드에서 자신이 포함된 객체의 값 접근 let Perso..
객체의 프로퍼티 값으로 함수가 들어가는 '메소드(Method)' 메소드 (Method) 메소드는 객체의 프로퍼티 값으로 함수가 들어가있는 것을 말한다. 예를 들어, 사람을 나타내는 객체가 특정한 값만을 가지고 있는것이 아니라 어떠한 행동도 하게 되는데, 그 행동이 함수인 것이다. ex) 인사하기, 달리기, 밥먹기 등등.. 이렇듯 객체도 객체에 따라 각각 수행할 수 있는 일들이 있으며, 그 수행하는 행동을 함수로 표현하는 것이다. 메소드 선언법 객체에 메소드 선언법 let Person = { Greeting: function(){ console.log('Hi'); } } /* 점 표기법으로 함수 값 넣기 Person.Greeting = function(){ console.log('Hi'); } */ 위의 코드와 같이 프로퍼티 값으로 함수를 선언하면 메소드가 만들어지는 ..
Javascript의 자료형 중 하나인 '객체(Object)' 객체 (Object) 객체는 자바스크립트에 존재하는 자료형 중 하나이다. 이 객체는 여러 데이터를 담을 수 있다는 점에서 배열과 비슷하나, 배열보다 담을 수 있는 데이터의 종류가 더 다양하다. { } (중괄호) 를 이용하여 객체를 생성할 수 있으며, 이 중괄호 내부에 값을 넣게 되는데 이 때 값을 넣는 방식이 특이하다. 바로 키(Key): 값(Value) 으로 구성해서 이 값을 여러개를 넣을 수 있다. 저 데이터 쌍 하나를 프로퍼티(property)라고 부르며 여기서 키(Key) 는 '값이 가지는 이름'이다. 그리고 값(Value)는 '키 라는 이름을 가진 값'이다. : (콜론) 을 이용하여 구분하며 키가 : (콜론) 을 기준으로 왼쪽에 값이 오른쪽에 위치해 있다. 키는 부를 때 키, 식별자, 프로퍼티 ..

티스토리툴바