림찌의 개발일기 💻

클래스형 컴포넌트와 함수형 컴포넌트의 비교를 위해 간단한 끝말잇기 예제를 가져왔다. 클래스형 컴포넌트 class WordRelay extends Component{ state = { //state를 먼저 이렇게 선언 word: '리액트', value: '', result: '', }; // 끝말잇기 오답 체크 onSubmitForm = (e) => { e.preventDefault(); if(this.state.word[this.state.word.length - 1] === this.state.value[0]{ //마지막 word의 첫번째와 지금 적은 값의 첫번째가 같으면 실행 this.setState({ result: '딩동댕, 이어서 작성해주세요', //정답일시 나오는 문구 word: this.st..

Hook 리액트는 클래스 컴포넌트와 함수형 컴포넌트 두가지로 나눠진다. (함수형 : hook) 원래 리액트에선 Class 컴포넌트만 이용할 수 있었지만, hook을 사용하면 class를 작성할 필요 없이 react와 상태값을 사용할 수 있다. hook의 특징 상태관련 로직을 재사용할 수 있도록 도와준다. 컴포넌트 재사용을 좀더 유려하게 해주고, 로직에 기반을 둔 함수들도 컴포넌트를 나눠줄 수 있다. class를 사용하지 않고 state를 사용할 수 있다. componentDidMount, componentWillUnmount... 등 라이프 사이클을 컴퍼넌트 안에 입력해주지 않아도 된다. 한 마디로, hook은 state 관리를 할 수 있고 라이프사이클을 작성하지 않아도 되고, 코드의 재활용성이 좋다. ..

props란? 간단하게 설명하자면 Component에서 Component로 전달하는 데이터를 말한다. props를 사용하면 효율적으로 component를 재사용할 수 있다. 부모 component에서 자식 component에서 데이터를 전달해 줄때 사용하는데, 여기서 큰 특징은 자식 컴포넌트는 부모 컨포넌트에게서 내려받은 props의 데이터를 직접 수정할 수 없는 것이다. React는 단반향 데이터로, 데이터가 한 방향으로만 흐르기 때문이다. (반면 state는 컴포넌트 내부에서 선언하는 값으로 해당 컴포넌트 안에서 값을 변경할 수 있다.) 쉽게 생각하면 그냥 부모의 유산을 자식에게 전달해준다고 생각하자. 알기 쉽게 예제를 보며 살펴보자. import React from 'react'; function ..

리액트는 component 기반이다. component를 통해 UI를 재사용 가능한 개별적인 조각으로 나눌 수 있다. component를 정의하는 방법은 두 가지가 있다. 1. Javascript 함수형 컴포넌트 function ImComponent(props){ return Hello, {props.name} } - state와 라이프사이클 사용이 불가하다. (단, Hooks 사용시 사용가능하다) - 컴포넌트 선언이 클래스보다 간편하고 직관적이다. 2. ES6 클래스형 컴포넌트 class ImComponent extends React.Component { render(){ return hello, {this.props.name} } } - state 와 라이프사이클 사용이 가능하다. - 임의 메서드를 ..

코드를 고치고 실행할때마다 명령어를 사용하는건 참 귀찮은 일이다. 그래서 리액트에선 하나의 플러그인을 설치할 수 있는데, 바로 react-refresh 이다. 이 플러그인은 코드를 고치고 새로고침이나 새로 빌드를 해주지 않더라도 변경된 사항이 자동으로 수정되는 아주 놀라운 기능을 가지고 있다. (이래서 리액트 리액트 하는구만...) 깨알 tips 👀👀 기존엔 react-hot-loader 라고 불리고 설치법도 달랐지만, webpack-cli가 4.xx 로 올라가면서 hot loader 대신 refresh를 사용하게 되었다. 이 편리한 플러그인을 깔아보자! (webpack의 설정은 [21.04.12]에 작성한 티스토리 글을 기준으로 한다) 1. react-refresh, react-refresh-webpa..