앞에서 component에 대해서 다루면서 component에 CSS를 입히는 방법에 대해서 같이 이야기했다. 이번에는 동적 할당에 대해서 알아보자. Component란 무엇일까? 앞서 React란 무엇인지 다뤘다. React란 무엇일까? React의 정의 React 공식 홈페이지에 따르면, 사용자의 인터페이스를 짓는 JavaScript library라고 설명한다. 문자 그대로 해석은 가능하지만 무언가 직접 coding-leaf.tistory.com How to set style Dynamically React로 만들어진 웹 앱들은 대체로 화려하다. 이는 사용자의 상호작용에 맞춰 페이지도 반응하기 때문인데, 이렇게 반응하기 위해서는 정적(static)으로 style을 입혀서는 안된다. 동적으로 style..
component는 useState를 사용하여 state를 가질 수 있다고 앞서 설명했다. 그러한 component들의 상태를 의미하는 용어들이 존재하는데 그것을 알아보자 state less, presentational, dumb component 위의 여러 명칭들은 아무런 state를 가지지 않고 단지 데이터를 출력하기 존재하는 component을 의미한다. 이와 반대로 state를 가진 component를 아래의 명칭으로 읽컫는다. smart, stateful components 아무래도 React에서 component를 다루다보면 응용프로그램을 작고 재사용 가능한 조각으로 나누기 때문에 대부분의 조각들, component들은 실제로 무언가를 출력하는 데에 초점을 맞추고 있다. 때문에 project에..
앞서서 component에 대해 이야기할 때, props를 활용하여 component간의 데이터 송-수신을 다뤘었다. Component란 무엇일까? 앞서 React란 무엇인지 다뤘다. React란 무엇일까? React의 정의 React 공식 홈페이지에 따르면, 사용자의 인터페이스를 짓는 JavaScript library라고 설명한다. 문자 그대로 해석은 가능하지만 무언가 직접 coding-leaf.tistory.com 이번에는 그 반대로 밑에서 위로 Bottom-Up approach에 대해서 이야기해보고자 한다. Component communication in Bottom-Up approach(상향 접근 방식) 사실 이미 앞에서 다뤘던 부분이다. const [enteredTitle, setEnteredT..
앞서 React란 무엇인지 다뤘다. React란 무엇일까? React의 정의 React 공식 홈페이지에 따르면, 사용자의 인터페이스를 짓는 JavaScript library라고 설명한다. 문자 그대로 해석은 가능하지만 무언가 직접적으로 와닫지 않는다. 그렇기에 React를 사용하 coding-leaf.tistory.com 굳이 React를 사용하지 않아도 어떤 웹사이트라도 구축할 수 있지만 더 복잡한 interface를 지닌 것을 구축할 때 React 같은 framework를 사용한다면 작업이 훨씬 수월해질 것이다. 사소한 문제들에 신경쓸 필요가 없으며, 오류도 덜 발생할 것이다. 그저 응용프로그램을 구성하고 핵심 비지니스 로직을 작성하는 것에 집중할 수 있을 것이다. 그것이 React와 같은 libra..
