[ReactJS] 왜 React JS를 쓰는가? (6) : 변수를 JSX에 전달해 주는 방법- ReactJS 랜더링의 강점

변수를 JSX에 전달해 주는 방법. vanilla JS 에서는 document로 가져온 element에다가 .InnerText("") 이런 식으로 값을 전달해 줬는데 JSX에서는 {} 중괄호만 열어주고 변수명을 넣어주면 된다.

 

 

컴포넌트를 랜더링을 한번만 현재 해주고 있다. 그래서 값은 올라가나 UI가 업데이트 되지 않는 문제가 있다.

 

Container 컴포넌트가 랜더링 된다는 것은 div h3 같은 JSX 코드가 React Element로 변환됨을 의미한다.

하지만 한번만 랜더링이 이뤄지고 그 뒤에는 이뤄지지 않는다.

따라서 한번더 해줘야 한다.

반복되는 작업이기에 reRender() 라는 함수를 선언해주고 코드를 수정해 주었다.

하지만 이런식이면 데이터를 수정할때마다 render를 다시해주는 걸 잊으면 안될 것이다. 최선의 방법이 아닌 것이다.

 

 

여기서 ReactJS이 가지는 엄청난 것 중 하나는.

ReactJS VS Vanilla JS

이게 엄청나게 중요한 부분이라고 한다.

 

ReactJS는 이전에 랜더링 된 컴포넌트가 무엇인지 check를 하고 있는 것이다. 그리고 다른 부분만 check 하는 것이다.

여러 요소들을 리랜더링 하려고 해도 오로지 바뀐 부분만 생성될거기 때문에 굉장히 interactive한 application을 만들 수가 있게 되는 것이다.

 

리랜더링을 발생시키는 가장 좋은 방법은 뭘까? 데이터를 바꾸고 다시 랜더링 해주는 좋은 방법.

 

랜더링을 하게 되면 이 컴포넌트도 바뀐 데이터를 가지고 다시 생성되게 되는데 하지만 React JS 가 강력한 기능을 제공하기 때문에 유일하게 리랜더링하게 되는것은 오직 counter 뿐인 것이다. 이게 바로 React를 이용하는 이유이다.

인터랙티브한 것을 만드는 데에 최적화가 되어 있기 때문이다.

 

 

https://nomadcoders.co/react-for-beginners/lectures/3265

All Courses – 노마드 코더 Nomad Coders