코딩을 잘하고 싶은 코린이 동토니

state란? state는 변경될 수 있는 데이터를 말한다. (Hooks가 사용되기 이전에는 state는 함수형 컴포넌트에서 사용이 불가능 했지만 Hooks가 나온 이후로는 함수형 class형 관계없이 사용이 가능하다.) 즉 state는 컴포넌트 내에서 데이터를 유동적으로 관리해야 할 때 사용한다. Props? 이전에 공부한 props(properties)는 컴포넌트간에 전송이 가능한 데이터였지만 부모 컴포넌트에서 전달되는 값이였기 때문에 한 컴포넌트안에서 데이터 변경을 할수가 없다. state 접근 state의 경우 직접적으로 state의 값을 변경시켜주려하면 안된다. class형 컴포넌트에서 setState()함수를 통해 state의 값을 변경시켜주어야 한다. state 예시 counter.js im..

Es6가 나오면서 새로운 함수형이 나오게 되었는데 바로 Arrow function 즉 화살표 함수가 새로 등장하게 되었다. 기존 함수의 역할을 기본적으로 대체할 수 있으며 가독성과 작성하기도 편해서 주로 많이들 사용하곤 한다. 근데 화살표 함수가 일반함수의 모든것을 대체할 수는 없다. 특히나 this를 사용하게 되었을 때 화살표함수와 일반 함수가 가리키는 this가 다르다 아래 예제를 한번 보자. function BlackDog(){ this.name = "흰둥이"; return { name : "검둥이", bark : function(){ console.log(this.name + " : 멍멍"); } } } const blackDog = new BlackDog(); blackDog.bark(); 위의..

Props JS로 웹개발을 진행해보신분들이라면 수도없이 많이 접했을 단어일 것입니다. 기본적으로 Props는 컴포넌트의 속성(attribute)을 설정할 때 사용하는 요소입니다. 즉 컴포넌트에서 다른 컴포넌트로 값을 전해주는 요소입니다. 중요한건 Props는 모든 컴포넌트와 컴포넌트 사이에서 값을 전달할 수 있는것이 아니라 부모 컴포넌트로부터 값을 불러와 자식 컴포넌트가 사용을 할 수 있게 됩니다. 밑에 예제를 한번 보게되면 import React, { Component } from "react"; import Mycomponent from "./Component/MyComponent"; class App extends Component { render() { return ( ); } } export d..

React.js 에서 컴포넌트를 구성하는 방법을 이야기해보라고 하면 2가지 Class형 컴포넌트와 함수형 컴포넌트를 이야기 할 수 있다. 우선 Class형 컴포넌트부터 살펴보자 import React, { Component } from "react"; class ClassComponent extends Component { render() { return ( 클래스형 컴포넌트 ); } } export default ClassComponent; 클래스를 선언후 extends로 Component 클래스를 상속받아 사용한다. Class형 컴포넌트의 특징을 살펴보면 1. state 및 LifeCycle 사용이 가능하다 2. 임의의 Method를 정의 할 수 있다. 3. render 함수로 jsx를 반환한다. 이..

html 태그들중 자주 사용되는 28가지 태그들이다. 위의 태그들을 바탕으로 HTML에 대하여 정리를 해보자 1. HTML의 기본구조 먼저 기본구조에서 사용되는 태그들에 대해 알아보자면\ - : 웹페이지가 어떤 버전의 HTML로 작성되었는지 결정해주는 선언이다. 웹페이지에는 여러 버전(HTML4, HTML5, XHTML 등)이 있는데 현 파일이 어떤 버전으로 작성되었는지 먼저 선언해주는 것이다. 너무 어렵게 생각하지 말고 간단하게 현재 작성된 이 페이지를 html로 해석해라 라는 뜻으로 받아들이면 된다. - : 웹페이지의 시작과 끝. 즉 페이지의 모든 요소들이 html이라는 태그로 감싸져있는것이다. - : 작성한 웹 페이지의 정보를 담아주는 태그이다. 예를들어 밑에 언급할 등 페이지에 나타낼 언어설정이나..