-
React - Rendering part3 리스트와 키
배열을 구성하는 방법은 일반적으로 같은데 보통 예제가 화살표 함수로 쓰는 것 밖에 없더라.. 나는 for문을 주로 쓰는 5년차 개발자인데.. 리스트를 구성할 때 키를 주입하고 화면에 뿌리는 예제를 구현해봤다. function App() { const numbers = [1, 2, 3, 4, 5]; /*배열을 만들고*/ let doubled = []; /*빈 배열을 선언해주고*/ for(let i=0;...
-
React - Rendering part2 함수형 컴포넌트의 생명주기 (Functional Component Life Cycle)
2. Functional Component Life Cycle 지난 포스팅에서 Class Component의 Life Cycle을 알아봤다. 하지만 Functional Component에선 Hook을 사용하게 되면서 차이가 생기게 되었다. Hook은 Class Component의 모든 것을 호환하는가? 호환하지 않는 부분은 어떻게 해야하는가?가 이번 포스팅의 중점이다. Hook의 상세한 사용 방법은 따로 포스팅 하겠다! Mount에서의 차이 getDerivedStateFromProps는 Prop에서 state를 return하여 받는 부분인데...
-
React - Rendering part5 Events
React가 이벤트를 다루는 방법을 알아보자~ 기존의 HTML에선 이벤트를 어떻게 다루었나? <form onsubmit="hello()"> <button type="submit"> Hello world </button> </form> <script> function hello(){ alert("안녕하세요!"); } </script> 위와 같이 화면 구성하는 부분과 javascript부분을 나누어서 구성하곤 하지 않았던가? 하지만 리액트에선 아래와 같이 function Form() { function hello() { alert("안녕하세요!"); } return ( <form onSubmit={hello}>...
