reacte에서 배열에 값을 추가하는 방법은 두가지가 있는 것이에요. // 첫번째 방법 var arr = [1, 2]; arr.push(3);// 3을 배열에 넣어준다. console.log(arr);// 결과는 (3) [1, 2, 3] // 두번째 방법 var arr = [1, 2]; var result = arr.concat(3); console.log(result)// 결과는 (3) [1, 2, 3] console.log(arr)// 결과는 (2) [1, 2] push는 원본(원래 배열)을 바꾸는 기능을 가지고 있고, concat은 원본을 바꾸지 않는 것이에요. 결국 concat은 새롭게 만들어진 배열을 반환하는 것이에요. State에서 값을 추가할 때는 push와 같이 원본을 변경하는 것을 쓰면 ..

📌 컴포넌트 이벤트 만들기 return ( // Component를 만들 때는 반드시 하나의 최상위 Tag만 (딱 하나) 써야 한다. {this.props.title} {this.props.sub} ); 컴포넌트를 만들고, 사용자 정의 이벤트를 실행하고 싶을 때, 위와 같이 onChanePage라는 이벤트를 만들어서 특정 함수가 호출되게 할 수 있는 것이에요. App.js에서 위와 같이 onChanePage Event에 함수를 만들고, {/*State화 한 뒤 코드*/} Subject.js에 위와 같이 a Tag를 눌렀을 때, 함수가 실행되는데, e.prevenDefulat()로 먼저 Reload를 방지해주고, App.js에 있는 onChagePage Event를 함수 형식으로 호출해 주는 것이에요. 이..

📌 Event setState 함수 이해하기 return ( {/* State화 하기 전 코드 */} {/**/} {/*State화 한 뒤 코드*/} {/**/} {this.state.subject.title} {this.state.subject.sub} 위와 같은 코드에서 컴포넌트가 이미 생성된 이후에 [this.state.mode = 'welcome']처럼 State 값을 직접 변경하면 안되고, 함수 형태로 변경해야 하는 이유를 알아볼 것이에요. constructor(props) { // State 값을 초기화 시키기 위함이고, 그 초기값으로 'title="WEB" sub="word wide web!"'을 설정하려 한다. super(props); this.state = { mode : 'read', ..

안녕하세요? 주니하랑입니다. 오늘은 React에 본격적으로 들어가기에 앞 써 Event 처리에 대해 공부해보고, props, render에 대해 다시 한번 재정립하고 가도록 할게요! 함께 공부 해 보실게요! 📌 이벤트 state props 그리고 render 함수 강의 리엑트에서는 state 값이 바뀌면 그 state를 가지고 있는 컴포넌트의 render 함수가 다시 호출되고, 그 밑에 있는 컴포넌트들도 각자 render 함수가 있는데, 모두 다 호출된다. 그래서 화면이 다시 그려지게 된다. render함수가 하는 일은 어떤 HTML을 그릴것인가?에 대한 결정을 하는 것이에요. 리엑트에서는 props, state 값이 바뀌면 컴포넌트의 render 함수가 호출 되도록 설계 되어 있는 것이에요. {this..

📌 Props Props는 Properties의 줄임말로 State와의 간단한 차이는 변할 수 없는 것이에요. 자바로 따지면 final이 붙은거라고 할 수 있을까요? 주니하랑은 Back End 성향이 강한 것이에요! Component는 상속하는 부모 Component로 부터 props를 받고 이 props는 상속 받은 Component 내에서 수정이 불가능한 것이에요. React에서는 '부모 > 자식'의 일방향성 상속이라는 특징 때문인 것이에요. props는 Component가 가지고 있는 다양한 값을 나타내기 위한 존재로 'this.props.~~~'로 나타내는 것이에요. 부모 Component가 자식 Component한테 전달하는 Data(자식 입장)로 읽기 전용인 것이에요. 📌 State State..

📌 State State는 Props와 비교해서 공부를 해야 하는 것이에요. 제품을 기준으로 이용자의 입장이 있고, 이를 구현하는 제작자 입장이 있을 것이에요. 예를 들어 핸드폰의 경우 버튼들이 있을건데, 이것을 UI (User Interface)라고 하고, 컴포넌트를 만드는 리엑트에서는 이용자가 이용하는 장치 즉, UI라고 생각할 수 있답니다. 그러면 제품을 만드는 사람들은 내부적인 구현을 위해 다양한 상태들, 내부적 조작장치들을 가지고 사용하는데, 이걸 State라고 할 수 있답니다. 즉, 이용자가 컴포넌트를 사용하는데 관점을 맞춘것이 Props이고, 제품을 만드는 사람들의 관점에 맞춘것이 State라고 할 수 있답니다. 컴포넌트에 props를 이용한다는 것은 아래 코드를 보았을 때, 가 있다면 pr..