this.state.editing을 사용해야하는 것 아닌가요?
8일 전
state에 들어있는 editing을 사용하려면 this.state.editing을 사용해야하는 것 아닌가요?
0
누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌
ㅠㅠ 갑자기 어떻게 해서 검색기능이 구현된 건지 이해가 덜 되었어요...
28일 전
이 부분때문일 거 같긴 한데요. indexOf는 인덱스를 뽑는 건데, 이걸로 어떻게 검색(필터링)기능이 구현 된 것인지 이해가 안되어서 질문드립니다..!
data={this.state.information.filter(
info => info.name.indexOf(this.state.keyword) > -1
)}
0
리렌더링
29일 전
state가 바뀌면 컴포넌트의 렌더링이 다시 일어난다고 하셨는데요~ 리덕스를 쓰는 경우에, 부모컴포넌트에서 내려주는 props가 변경되는 일이 생기기도 하는데, 이 경우에는 어떻게 되나요? props가 바뀌어도 리렌더링 되게 되나요?
0
props질문입니다.
1달 전
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
컴포넌트에 ref 달기가 정확히 동작하지 않네요. 답변 부탁 드려요
6달 전
강사님꼐서 쓰신"리액트를 다루는 기술" 이란 책도 사서 따라 해보고 있는데 잘 안되는 부분이 있어 글 올립니다. - 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
비주얼스튜디오 코드 사용법
6달 전
안녕하세요 강좌 보다 보니 state = { name: '', } 위 코드를 타이핑 하실때 콤마를 입력 후 엔터를 두번 치신거 같은데 { } 블럭을 빠저 나오더라구요 저건 뭘 설치 해야 되는건가요?
0
[React.js] onUpdate is not a function
7달 전
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() 부분에서 크로쓰 오리진 에러가 뜹니다.
8달 전
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 을 하고나서 에러입니다.
8달 전
맥 터미널에서 프로젝트 폴더를 만들고 그 폴더 안에서 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:
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:
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.
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.
- 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
[ts] 'phoneForm' is declared but its value is never read.
8달 전
섹션 7번의 동영상을 그대로 따라 했는데.. App.js 에서 phoneForm.js 의 내용을 읽어오지 못하고 있습니다. App.js 파일 상단의 import phoneForm from './components/phoneForm' 줄에 커서를 올려 놓으면 [ts] 'phoneForm' is declared but its value is never read. 라는 메시지가 나옵니다. 어찌 해결하면 좋을런지요?
0
