누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌

(73개의 수강평)

2820명의 수강생
16,500원
지식공유자 · velopert(김 민준)
22회 수업· 총 2시간 53분수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 초급, 중급
이효진 프로필

yarn start 이효진 25일 전

yarn start를 하면 이런 에러가 자꾸 발생하는데 왜그런건가요..? node는 원래 설치되어 있어서 버전확인도 잘되고 yarn도 버전확인이 잘되는데 start가 안되서 수업 진행을 못하고있어요... 애초에 create-react-app으로 만들고 나면 yarn start 하라는 메세지가 저는 뜨지 않아요..

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

0
GodKyo 프로필

...data에서 ...의 역할이 정확히 무엇인지 궁금해요! GodKyo 1달 전

실행결과 각각 비교해보았는데, 정확한 용도를 잘 모르겠어서 질문드립니다.

2
최기영 프로필

reactjs code snippet 깔았는데 rcc해도 아무 것도 안나와요 최기영 2달 전

강의 화면에서는 자동 완성이 되던데 저는 왜 안나올까요?

1
carpediem0817 프로필

PhoneList.js 와 PhoneInfo.js 를 나누는 이유 carpediem0817 2달 전

파일 구조를 보면 제가 이해하기로는

PhoneForm.js :

이름과 전화번호를 입력받고 입력상태를 App.js 로 넘기기

PhoneInfoList.js :

App.js 에 데이터를 PhoneInfoList.js 에서 받고 데이터를 

map으로 돌려서 list 로 만들어준 후

PhoneInfo.js :

PhoneInfoList 에서 받은 list 를 style 에 맞게 보여준다.

이렇게 이해를 했는데요.

PhoneInfoList 와 PhoneInfo 를 구분한 이유가 궁금합니다.

App.js 의 데이터를 PhoneInfo 에서 받아서 map 을 사용해서 

바로 style 에 맞게 화면이 보여주게 할 수도 있을텐데

List 로 만들어주고 화면에 보여주는 파일을 구분해주는 이유가

무엇인가요?

0
코딩나무 프로필

Object.assign으로 값을 복사하여 concat하는 이유가 무엇인가요? 코딩나무 4달 전

궁금합니다.

1
허태정 프로필

this.state.editing을 사용해야하는 것 아닌가요? 허태정 6달 전

state에 들어있는 editing을 사용하려면

this.state.editing을 사용해야하는 것 아닌가요?

0
Hyunsang Han 프로필

ㅠㅠ 갑자기 어떻게 해서 검색기능이 구현된 건지 이해가 덜 되었어요... Hyunsang Han 7달 전

data={this.state.information.filter(
info => info.name.indexOf(this.state.keyword) > -1
)}

이 부분때문일 거 같긴 한데요. indexOf는 인덱스를 뽑는 건데, 이걸로 어떻게 검색(필터링)기능이 구현 된 것인지 이해가 안되어서 질문드립니다..!

 

0
Hyunsang Han 프로필

리렌더링 Hyunsang Han 7달 전

state가 바뀌면 컴포넌트의 렌더링이 다시 일어난다고 하셨는데요~

리덕스를 쓰는 경우에, 부모컴포넌트에서 내려주는 props가 변경되는 일이 생기기도 하는데, 이 경우에는 어떻게 되나요? props가 바뀌어도 리렌더링 되게 되나요?

0
rhaehl@naver.com 프로필

props질문입니다. rhaehl@naver.com 8달 전

PhoneInfoList.js에서
<PhoneInfo info={info} key={info.id}/>
PhoneInfo컴포넌트한테 전달하는데
받을 때
const {name, phone, id} = this.props.info;
this.props.info로 받는건 알겠습니다.
그런데 App.js에서 PhoneInfoList로 전달할때
<PhoneInfoList data={this.state.information}></PhoneInfoList>
data=어쩌고 보내니까 PhoneInfoList에서
const { data } = this.props.data;로 받아야하는 줄 알고
그렇게 작성했더니 에러가 났습니다.
this.props; 로 하면 되고
this.props.data로 하면 에러가 나는데
개념이 아직 안되어있는건지는 모르겠는데 설명해주실 수
있나요 ㅠ
 

2
rhaehl@naver.com 프로필

정리 rhaehl@naver.com 8달 전

강사님이 했던말들을 공부하면서 정리하고싶은데 제 개인 블로그에 올려도되나여? 

2
최성필 프로필

혹시 리액트 빌드되는 홈페이지를 바꾸고싶은데 아시나요? 최성필 10달 전

지금 익스플로어에서 실행되는 리액트를

크롬으로 변경하고 싶습니다.

3
이태장 프로필

컴포넌트에 ref 달기가 정확히 동작하지 않네요. 답변 부탁 드려요 이태장 2019.03.19

강사님꼐서 쓰신"리액트를 다루는 기술" 이란 책도 사서 따라 해보고 있는데 잘 안되는 부분이 있어 글 올립니다. - 5.3 검포넌트에 ref 달기

[ ScrollBo.js ]

import React, { Component } from 'react';

class ScrollBox extends Component {

scrollToBottom = () => {

const { scrollHegiht, clientHeight } = this.box;

console.log("scrollHegiht : " + scrollHegiht);

console.log("clientHeight : " + clientHeight);

this.box.scrollTop = scrollHegiht - clientHeight;

}

render() {

const style = {

border : '1px solid black',

height : '300px',

width : '300px',

overflow : 'auto',

position : 'relative'

}

const innerStyle = {

width : '100%',

height : '650px',

background : 'linear-gradient(white, black)'

}

return (

<div

style={style}

ref={(ref) => {this.box=ref}}>

    );

}

export default ScrollBox;

[App.js]

import React, { Component } from 'react';

import ScrollBox from './ScrollBox';

class App extends Component {

render() {

return (

this.scrollBox=ref} />

this.scrollBox.scrollToBottom()}>

맨 밑으로

}

);

}

}

export default App;

위 2개의 js를 만들어서 실행하면 "맨밑으로" 버튼을 누르면 스크롤바가 내려가지 않습니다.

제가 어떤 부분을 코딩을 잘 못 한 건 가요?

0
좀 해 프로필

비주얼스튜디오 코드 사용법 좀 해 2019.03.17

안녕하세요

강좌 보다 보니

state = {

name: '',

}

위 코드를 타이핑 하실때

콤마를 입력 후 엔터를 두번 치신거 같은데

{ } 블럭을 빠저 나오더라구요

저건 뭘 설치 해야 되는건가요?

0
강승훈 프로필

컴포넌트 데이터 이동 강승훈 2019.03.03

props를 통해 부모에서 자식으로 데이터가 이동이 되는데, 그러면 반대로 자식에서 부모에게 데이터를 전달하려면 어떻게 해야하나요?

1
Minkoo94 프로필

[React.js] onUpdate is not a function Minkoo94 2019.02.08

TypeError: onUpdate is not a function

PhoneInfo._this.handleToggleEdit

16 | handleToggleEdit = () => {

17 | const {info, onUpdate} = this.props;

18 | if(this.state.editing){

19 | onUpdate(info.id, {

20 | name: this.state.name,

21 | phone: this.state.phone,

22 | });

실습중 이렇게 에러가 뜨는데 원인을 잘 모르겠습니다 ㅠㅠ

0
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스