반응형 분류 전체보기266 Props & State 의 차이 Props : 상위 컴포넌트 > props > 하위 컴포넌트 상위 컴포넌트는 하위 컴포넌트에게 props를 통해 값을 전달해 내부의 state를 바꾸기 때문에 컴포넌트 스스로 외부에서 전달되는 props를 변경하는 것은 금지되어 있다. State : 하위 컴포넌트 > 이벤트 실행 > 상위 컴포넌트의 state 호출 > state 값 수정 하위 컴포넌트가 상위 컴포넌트를 동작시키려면 props를 전달하는 것이 아니라 상위 컴포넌트 안에 이벤트를 심고 그 안에 setState로 값을 바꿔야 한다. 2021. 5. 4. 컴포넌트 이벤트 생성 Subject 컴포넌트 수정 - 대상 컴포넌트에 onChangePage 함수를 사용한다. - onChangePage를 실행시키는 메소드를 대상 컴포넌트에 사용한다. App.js에서 render()의 Subject 부분 Subject.js에 onChangePage를 아래와 같이 만든다. class Subject extends Component{ render(){ return ( {this.props.title} {this.props.sub} ); } } TOC 컴포넌트 수정 App.js에서 render()의 TOC부분 TOC.js의 list 부분 lists.push({data[i].title}); 을 다음과 같이 수정 lists.push( {data[i].title} ); 위와 같이 바꾸었다면 Web 버튼.. 2021. 4. 30. Event 2. Bind & setState Bind - 위 예를 보면 bindTest() 함수는 아무 출력 결과물이 없다. - 하지만 bind를 사용하면 강제로 bindTest에 인자를 집어넣어 준다. - 따라서 위와같이 bindTest2는 egoing이 출력되는것을 볼 수 있다. - funcname.bind(this) = component 자체를 가리켜 함수 안으로 주입해 준다. setState - 생성자(constructor)에서 선언하는 것은 기존에 하던 방식으로 선언하면 된다. - 하지만 컴포넌트가 생성이 끝난 다음에 동적으로 변경할때에는 기존의 방식으로 하면 바뀌지 않는다 예) this.state.mode = 'welcome' - this.setState({mode:'welcome'}) 을 사용해야 정상적으로 작동한다. 2021. 4. 30. Batch Normalization 2 & Well - Known Models & Recurrent Neural Network Normalization - 정규화 되지 않은 데이터는 원하는 값을 찾는데에 X, Y 축이 다른 분포를 가지지 때문에 각각의 반영이 다르게됨. - 정규화가 된 데이터는 같은 분포를 가지기에 원하는 값을 빨리 도출함. Batch Normalization - 배치는 샘플들의 묶음. - 한 레이어를 통과했을때 같이 존재하는 샘플들을 평균내는것. - 한 배치에 들어있는 한 픽셀의 평균값 - x = sample (ex : MNIST = 28*28 이미지. 이미지 하나당 차원 = 784, ) - 각 픽셀당 표준편차. - 위 두 식은 이미지와 차원이 같음. - 위 두 식은 배치마다 새로운 값들이 형성이됨 - 정규화 식. - 정규화 식에 새로운 Distribution으로 변경. - 베타, 감마를 통해 학습시키는 식. .. 2021. 4. 28. Event - 링크를 클릭하면 다른 메시지가 출력되도록 함. - React 에서는 Props나 State값이 바뀌면, 그 state를 가지고 있는 컴포넌트의 render 함수가 다시 호출된다. - 아래는 event의 설치와 event의 기본적인 동작을 방지하는 code 이다. //App.js 중에서 render() render() { console.log('App render') var _title, _desc = null; if (this.state.mode === 'welcome'){ _title = this.state.welcome.title; _desc = this.state.welcome.desc; } else if (this.state.mode === 'read'){ _title = this.state... 2021. 4. 27. State 개발 State 제품을 조작하는 입장과 구현자의 입장이 있다. Props : 부모 컴포넌트가 자식 컴포넌트에게 주는 값. 읽기 전용 State : 컴포넌트 내부에서 선언하며 내부에서 값 변경을 가능. 컴포넌트 내부적으로 사용하는 정보. 예를들면 제품의 전선 등 밖에서 보여서 안되는 물건을 뜻한다. 첫번째로 어떠한 컴포넌트가 실행 될 때 render 함수보다 먼저 실행되면서 컴포넌트를 초기화 시켜주고 싶은 코드는 constructor(props){ super(props); } 해당하는 코드블럭 안에 작성한다. App.js의 state로 선언된것을 하위 props에서 불러오는것은 아래 코드처럼 가능하다. class App extends Component { constructor(props){ super(props.. 2021. 4. 26. 이전 1 ··· 39 40 41 42 43 44 45 다음 반응형
