Skeleton의 세상

리덕스 : 상태 관리의 로직을 컴포넌트 밖에서 처리하는 방법 리덕스를 적용한 구조는 위의 이미지와 같습니다. 모두 스토어에서 관리하고 동작하죠 여기서 나오는 용어를 간단히 정리해 보자면 스토어: 애플리케이션 상태 값들을 내장 액선: 상태 변화를 일으킬 때 참조하는 객체 디스패치: 액션을 스토어에 전달 리듀서: 상태를 변화시키는 로직이 있는 함수 구독: 스토어 값이 필요한 컴포넌트는 스토어를 구독(계속해서 스토어를 본다는 의미) 그럼 이제 사용 하는 방법을 알아보아야겠죠? 리덕스는 리액트에서 사용하려고 만든 라이브러리지만 리액트에 의존하지않아서 리액트를 사용하지 않아도 독자적으로 사용이 가능합니다. 이렇게 HTML로 작성해서 불러올 수 있습니다 를 해서 한번 확인해보면 콘솔창에 다음과 같이 잘 나오는지 확..

함수형 컴포넌트에 대하여 알아보겠습니다 함수형 컴포넌트는 언제 사용해야 할까요? 함수형 컴포넌트는 컴포넌트에서 라이프사이클, state등 불필요한 기능을 모두 제거한 상태로써 메모리 소모량이 일반 컴포넌트보다 현저히 적습니다. 그렇기 때문에 성능면에서 더 빠른편이죠. 리액트 프로젝트에서 state를 사용하는 컴포넌트의 갯수를 줄이면 줄일 수록 좋습니다 반드시 state나 라이프사이클을 사용해야 하는 경우에만 클래스 형으로 변환하여 컴포넌트를 작성하는 것이 좋습니다. 그럼 함수형 컴포넌트와 클래스형 컴포넌트에 대하여 알아보아야 구분하기 쉽겠죠? 1. 클래스형 컴포넌트 기본적으로 사용하고있는 컴포넌트 입니다 코드를 통하여 한번 알아보죠 import React, { Component } from 'react'..

onKeyPress는 특정한 키를 눌렀을 경우에 호출하는 이벤트 입니다. 키보드의 모든 키가 들어갈 수 있으며 이 키에 대한 부분은 다른 글에서 다루기로 하고 onKeyPress 사용방법을 알아 보도록 합시다 class TestReact extends Component { constructor(props) { super(props); } render() { return { 숫자 : { this.state.number } { if (e.key === 'Enter') { console.log('Enter Click'); } } } /> } } } 위와 같이 사용하시면 됩니다. 엔터를 누르면 console창에 Enter Click 이라고 나오게 됩니다! 값이 나오길 원한다면 e.target.value를 하시면..

onChange는 input 요소 값이 변경될때마다 호출됩니다. 아래의 코드를 보며 살펴봅시다 class TestReact extends Component { constructor(props) { super(props); } render() { return { 숫자 : { this.state.number } { console.log(e); //input의 값이 변경될때마다 호출됩니다. } } /> } } } 위의 onChange의 값은 message의 값을 log로 계속해서 콘솔창에 띄워줄 것입니다.

state를 사용할때 state의 값을 바꿔줄때 어떻게 해야할까요 이때는 setState(state)를 써주면 됩니다. 간단히 코드를 통해 알아볼까요 class TestReact extends Component { constructor(props) { super(props); this.state = { number: 0, } } render() { return { 숫자 : { this.state.number } { this.setState({ number: this.state.number + 1 }) }}>+1하기 } } } 이렇게 사용하게 됩니다. setState의 사용법 어렵지 않죠? !! 주의사항 state값은 무조건 setState로만 값을 변경,업데이트 해주어야합니다. setState메서드는 파..

1. array : 배열 2. bool : 참, 거짓 3. func : 함수 4. number : 숫자 5. object : 객체 6. string : 문자열 7. symbol : ES6 문법의 심벌 개체 8. node : 렌더링할 수 있는 모든 것 9. element : 리액트 요소 10. instanceOf(className) : 특정 클래스의 인스턴스 11. oneOf(['A', 'B']) : 주어진 배열 요소 중 값 하나

React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있습니다. class Control extends React.Component { constructor(props) { super(props); // 초기값을 설정해 줍니다. this.state = { isIn: false, }; } handleInClick = () => { //setState를 사용하여 값을 변경해 줍니다. this.setState({isIn: true}); } handleOutClick = () => { //setState를 사용하여 값을 변경해 줍니다. this.setState({isIn: false}); } render() { // ..

리액트의 이벤트를 처리하는 방법을 알아보겠습니다. 이벤트는 function 함수를 처리하는 방법입니다. class Test extends React.Component { constructor(props) { super(props); // 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다. this.handleClick = this.handleClick.bind(this); } // 함수 정의 handleClick() { console.log('버튼이 클릭되었습니다'); } render() { return ( TEST ); } } 위와 같이 정의하여 사용할 수 있습니다.

리액트의 생명주기 중 constructor 메서드가 있습니다. 이 메서드는 맨 처음 실행되는 메서드 입니다. 생성자라고도 부를 수 있습니다. 사용방법은 다음과 같습니다. class Test extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( Hello, world! It is {this.state.date.toLocaleTimeString()}. ); } } state에 값을 지정해서 사용합니다. constructor(props) { super(props); this.date = new Date(); } 만약 이렇게 쓴다면 이또한 동작은 합니다만, 데..

컴포넌트 간에 데이터를 전달하는 방법에 대하여 알아보도록 합시다! 먼저 컴포넌트를 하나 만들어 줍니다! 컴포넌트는 아무렇게나 만들면 됩니다 class TextCard extends React.Component { render() { return ( {this.props.value} ); } } 컴포넌트를 그려주기위해 불러온 다음 아래와 같이 값을 넘겨주면 됩니다. class Main extends React.Component { renderText(i) { return ; } render() { return ( {this.renderText(0)} {this.renderText(1)} {this.renderText(2)} {this.renderText(3)} {this.renderText(4)} {thi..