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

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

(46개의 수강평)

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

Object.assign으로 값을 복사하여 concat하는 이유가 무엇인가요? 임찬수 6일 전

궁금합니다.

0
허태정 프로필

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

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

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

0
Hyunsang Han 프로필

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

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

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

 

0
Hyunsang Han 프로필

리렌더링 Hyunsang Han 3달 전

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

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

0
rhaehl@naver.com 프로필

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

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 5달 전

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

2
최성필 프로필

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

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

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

3
이태장 프로필

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

강사님꼐서 쓰신"리액트를 다루는 기술" 이란 책도 사서 따라 해보고 있는데 잘 안되는 부분이 있어 글 올립니다. - 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
좀 해 프로필

비주얼스튜디오 코드 사용법 좀 해 8달 전

안녕하세요

강좌 보다 보니

state = {

name: '',

}

위 코드를 타이핑 하실때

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

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

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

0
강승훈 프로필

컴포넌트 데이터 이동 강승훈 9달 전

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

1
Minkoo94 프로필

[React.js] onUpdate is not a function Minkoo94 10달 전

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
곽규원 프로필

componentDidCatch() 부분에서 크로쓰 오리진 에러가 뜹니다. 곽규원 10달 전

componentDidCatch() 부분에서 저는 크로쓰 오리진 에러가 뜨네요... A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information. 뭐가 문제인지 알 수 있을까요? (코드 https://codesandbox.io/s/5klql536vk)

1
윤상현 프로필

npx create-react-app my-app 를 하고 cd my-app 을 하고나서 에러입니다. 윤상현 10달 전

맥 터미널에서 프로젝트 폴더를 만들고 그 폴더 안에서

npx create-react-app my-app 를 치고

cd my-app 을 치고

yarn start를 하였는데

There might be a problem with the project dependency tree.

It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"babel-loader": "8.0.4"

Don't try to install it manually: your package manager does it automatically.

However, a different version of babel-loader was detected higher up in the tree:

/Users/yunsang/Desktop/node_modules/babel-loader (version: 8.0.5)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.

That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.

If this has not helped, there are a few other things you can try:

  1. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.

    This may help because npm has known issues with package hoisting which may get resolved in future versions.

  2. Check if /Users/yunsang/Desktop/node_modules/babel-loader is outside your project directory.

    For example, you might have accidentally installed something in your home folder.

  3. Try running npm ls babel-loader in your project folder.

    This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.

That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

error Command failed with exit code 1.

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

이런에러가 나옵니다.

어떻게 해결하나요?

위에 1~7까지 순서 지키며 다 해봤는데도 안됩니다.

0
tae ho kim 프로필

[ts] 'phoneForm' is declared but its value is never read. tae ho kim 11달 전

섹션 7번의 동영상을 그대로 따라 했는데..

App.js 에서 phoneForm.js 의 내용을 읽어오지 못하고 있습니다.

App.js 파일 상단의

import phoneForm from './components/phoneForm' 줄에 커서를 올려 놓으면

[ts] 'phoneForm' is declared but its value is never read.

라는 메시지가 나옵니다.

어찌 해결하면 좋을런지요?

0
박성우 프로필

input 필드에서 value={this.state.name}는 왜 사용하는건가요? 박성우 2018.11.22

input필드에 end유저가 입력한 값이 value가 자연히 될텐데,

왜 굳이 component의 state를 다시 input필드의 value가 되도록

value={this.state.name}를 하는건지 궁금합니다

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