Torch for new way

React에서 데이터가 변하면 렌더링도 바뀌어야한다. 그런데 데이터는 객체로 전달이 된다. 이 객체의 변화를 컴퓨터가 인식하도록 할 수 있어야 렌더링을 바꿀 수 있는데, 이 글에서는 이에 대해 몇 가지 예시를 들어 공부해보도록 한다. 다음과 같이 html을 작성해보자. 안에 component를 넣고 그 안에 button element을 넣었다. button element에는 click시 발동하는 알람을 세팅해두었다. 그런데 이 html을 브라우저에서 열어보면 클릭을 안했는데도 불러오자마자 알람이 뜨는 것을 알 수 있다. 이는 브라우저가 html을 그리는 과정에서 함수가 실행되기 때문이다. 이를 해결하려면 새 함수를 만들어서 해당하는 함수를 감싸버리는 방법이 있다. 함수를 선언만 된 상태로 바꿔준다고 생각..

지난 번에 이어서 Class Component 에 대해 계속 알아보자. 우선 다시 한 번 Class Component를 이용해 html element를 생성해보자. 1. Class component를 이용한 html element 생성 React.createElement의 인자는 순서대로 '생성할 element', '그 element의 attribute', 'element의 value' 이다. 이 html을 브라우저로 열어보면 hello라는 텍스트를 가지고 지정한 value, name, class를 가진 div가 생성되었음을 볼 수 있다. 가독성을 위해 다음과 같이 변수를 선언해 React.createElement를 밖으로 빼주자. 이제 input element를 방금 만든 div안에 넣어서 생성해주는 ..

1. intro React에 대해 알아보자. react는 기본적으로 SPA, single page app을 구현하기 위해 사용하는 프레임워크이다. 기존 프론트앤드 개발을 훨씬 쉽게 만들어 주는데 그 의의가 있다. 기존까지 배워왔던 js는 데이터가 변할 때마다 렌더링을 변형해야 했다. 이 때 데이터의 변화에 대응해 어떤 변화를 (사용자에게 보이는) 줄지를 생각하는 과정이 필요했는데, facebook의 개발자들은 그냥 기존 뷰를 제거하고 처음부터 새로 렌더링 하는 방식을 선택했다. 이를 최적화해 최대한의 성능을 뽑아낼 수 있도록 한 것이 react이다. 1. react react를 이용해 간단한 버튼을 만들어보자. 우선 head 부분에 react에 대한 script를 추가해주고 코드를 작성한다. (axios..