🎈 Learn React

🍩 Components: UI building blocks 앞서 말했듯이, React는 component를 통해 UI를 생성한다. 곧바로 그 방식에 대해 설명하기 전에 잠시 React를 잊고 기본으로 돌아가보자. • Traditional UI Building 기

이전 포스트에서 말했듯이, 보통의 React App에서는 root component가 존재하며 다른 component들은 root에 nested 되는 형태로 구현된다.이전에 다루었던 Box와 SubBox 예제이다. 실제 React App이라면, 아래와 같이, root

앞서 말했듯이, React는 component를 통해 UI를 생성한다. 곧바로 그 방식에 대해 설명하기 전에 잠시 React를 잊고 기본으로 돌아가보자.<span style="color : 기본적으로, Web은 HTML을 이용하여 document를 구성한다. HT

이전 포스팅에서 언급했듯이 React는 component를 통해 markup과 rendering logic을 결합한다. 그러나 단순히 JSX가 markup만을 나타낼 수 있다면 component의 본 목적을 달성하기 쉽지 않아 보인다.{ } - Curly Braces가

이제껏 확인한 React의 장점은 component의 개념을 통해 markup을 재사용할 수 있다는 점, 그리고 JSX를 통해 rendering logic과 markup을 보다 쉽게 결합할 수 있다는 점이다.그러나 단순히 markup을 component 형태로 변화만

이제껏 확인한 React의 장점은 component의 개념을 통해 markup을 재사용할 수 있다는 점, 그리고 JSX를 통해 rendering logic과 markup을 보다 쉽게 결합할 수 있다는 점이다.그러나 단순히 markup을 component 형태로 변화만

특정 조건에 따라 다른 화면을 출력하는 것, 즉 Conditional Rendering은 rendering logic과 markup을 결합한 component의 장점이 잘 드러나는 부분 중 하나이다.<span style="color : Conditional ren

다음과 같은 반복되는 markup을 보다 효율적으로 JSX로 나타낼 수 있을까?주목해야할 점은 기본적인 markup은 <li>로 동일하나 그 안의 내용, 즉 데이터만 변한다는 사실이다. 따라서 React는, 이와 같이 반복되는 데이터의 경우, 이들을 JavaScr

React는 app 내의 component를 어떠한 방식으로 관리할까? Browser가 HTML과 CSS를 tree 구조인 DOM과 CSSOM으로 관리하듯이, React 역시 tree 구조를 이용한다.💡 React creates a UI tree from the co

Event handling은 적합한 JSX 태그에 handler function을 prop으로 전달하여 구현할 수 있다.첫 예시와 같이 함수를 정의하여 전달할 수 있으며, 다음 예시 같이 inline syntax를 이용하는 것도 가능하다. 그러나 view와 logic을

다음은 "Next" 버튼을 눌렀을 때 다음 이미지를 불러오고 그에 따른 이미지 번호를 표시하는 Gallery component이다.handleClick이라는 event handler function을 통해, 버튼이 클릭될 때마다 index를 1씩 증가시키고 이에 따라

Component가 화면에 나타나기 위해서는 React가 component를 render하는 과정을 거쳐야 한다. React의 render 과정을 정확히 아는 것이 React의 동작을 이해하는 데 큰 도움을 줄 수 있다.React의 render 과정은 다음의 과정을 거