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

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

궁금합니다.

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

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

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

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

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

리렌더링 Hyunsang Han 3달 전

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

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

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

정리 rhaehl@naver.com 5달 전

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

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

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

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

컴포넌트에 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를 만들어서 실행하면 "맨밑으로" 버튼을 누르면 스크롤바가 내려가지 않습니다.

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

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

안녕하세요

강좌 보다 보니

state = {

name: '',

}

위 코드를 타이핑 하실때

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

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

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

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

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

[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 | });

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

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)

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까지 순서 지키며 다 해봤는데도 안됩니다.

[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.

라는 메시지가 나옵니다.

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

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

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

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

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