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

정리 rhaehl@naver.com 4일 전

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

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

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

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

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

강사님꼐서 쓰신"리액트를 다루는 기술" 이란 책도 사서 따라 해보고 있는데 잘 안되는 부분이 있어 글 올립니다. - 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를 만들어서 실행하면 "맨밑으로" 버튼을 누르면 스크롤바가 내려가지 않습니다.

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

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

안녕하세요

강좌 보다 보니

state = {

name: '',

}

위 코드를 타이핑 하실때

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

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

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

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

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

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

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() 부분에서 크로쓰 오리진 에러가 뜹니다. 곽규원 5달 전

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 을 하고나서 에러입니다. 윤상현 6달 전

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

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

섹션 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}는 왜 사용하는건가요? 박성우 7달 전

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

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

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

Prettier를 설치했는데.. Sihyeong Lee 8달 전

관련 세팅 방법들을 찾아보아도 확실하게된 정보가 없네요. Basic Config를 적용해서 저장될때 자동으로 스타일이 적용이 되는것은 확인을 했는데 파일 자체가 JS파일로 인식되어서(React파일이아닌)

코드가 다 깨져버리더군요.

전에 뭔가를 설치하면 VS Code자체에서 파일을 React로 아이콘이 바뀌고.. 그 이후에 Prettier를 적용하면 자동으로 스타일이 지정될것같은데 그게 무엇이였는지 잘 모르겠네요.

지금 벨로퍼트님이 사용하시는것처럼 아이콘들을 적용해줄수있을까요?

강의 결제 확인 요청 황선웅 9달 전

안녕하세요.

누구든지 하는 리액트 강의신청 후에 무통장 입금을 처리했습니다.

입금자는 주식회시 에이치포 입니다.

입금확인 및 수강가능 처리 부탁드립니다.

componentDidCatch에 관련된 질문입니다. no_ok 7달 전

componentDidCatch 를 사용할때

getBoundingClientRect 을 호출하게 되면..

this를 찾을 수 없어서 그런지..

오류를 내면서 componentDidCatch 도 호출이 안됩니다.

이런 경우는 어떻게 처리를 해야하는건가요?

  componentDidMount() {
   console.log(this.myDiv.getBoundingClientRect().height);
  }
  componentDidCatch(error, info) {
    console.log(error); //에러내용
    console.log(info); //에러발생지
    this.setState({
      error: true
    });

npx를 사용하는 이유를 알고 싶어요. Jason 9달 전

강의 잘보고 있습니다.

그냥 create-react-app 하는거랑 npx create-react-app 하는게 어떤 차이가 있는지 알고 싶어요.

가상 DOm diff질문드립니다 :ㅇ 여어 11달 전

리액트에서 state가 변할 때만 다시 rendering되는 걸로 알고 있는데

그렇다면 결국 state를 통해서 실제돔과 가상돔의 변화 diff를 인지해서 reRender를 하는 건가요??