> For the complete documentation index, see [llms.txt](https://ljh86029926.gitbook.io/coding-apple-react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ljh86029926.gitbook.io/coding-apple-react/2/undefined-1/render.md).

# render

JSX를 작성하는 부분, 실제 렌더링이 이루어 집니다.

### Render메소드에 대해서 이해해 봅시다.

이전 장에서, render 메소드는 작성한 JSX를 HTML로 변환해 실제 브라우저에 렌더링 하는 작업을 한다고 배웠습니다. 그렇다면, render메소드에서 우리가 할 수 있는 것들은 뭐가 있을까요? 크게 2가지가 있습니다.

### 첫 번째, JSX를 렌더링 하는것

이것은 어찌보면 당연한 이야기 일지도 모르겠습니다. render 메소드를 통해서 작성한 JSX들을 렌더링 합니다. 우리가 작성한 부분이 나타나게 되는 것이죠.

### 두 번째, setState를 하지 않고 데이터를 가공해 보여주는 것

앞으로 리액트 개발을 하면서 여러가지 많은 데이터를 다루게 될 수도 있는데, 그 데이터가 렌더링 해주기 좋은 형태로만 내려오지는 않을 것 입니다. (ex API response) 그럴 때마다 우리가 데이터를 다시 재조합 하여 관리를 해야 하는데, 데이터를 보기좋게 재조합 하는 과정을 render 메소드에서 수행할 수도 있습니다. 또는 state배열을 가지고 그 요소의 갯수만큼 특정 JSX부분을 반복해서 처리하는 것들을 하는데 render 메소드는 효과적일 수 있습니다. 한가지 예를 들어 드리겠습니다.

![많은 소수점 숫자 배열을 가지고 있습니다.](https://3334242005-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LV81lySVctD2m2qG3Ob%2F-LbYbDTlnt2eTPs0003z%2F-LbYhrHePun5zJ1W7oON%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202019-04-03%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2011.59.02.png?alt=media\&token=021a34e3-1a62-4899-82c7-ed894effe66d)

그러나 이 숫자를 전부 반올림된 형태로 보여줄 것입니다. setState를 하지 않고 render메소드에서 가공하는 것으로 해결할 수 있습니다. render 메소드는 생각보다 간편하게 제작이 가능합니다.

![render 메소드 내에 데이터를 가공해서 보여줄 수 있습니다.](https://3334242005-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LV81lySVctD2m2qG3Ob%2F-LbYiPnWc6BeB68jS8gN%2F-LbYiS1uQ6RkS_IgmQRq%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202019-04-04%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2012.02.39.png?alt=media\&token=e0347839-b35a-4702-9046-2904f2fe3616)

render 메소드를 자세히 보면, state에 있는 데이터를 가지고 마음껏 변경을 하는 모습을 보실 수 있습니다. 숫자 데이터를 직접 setState를 통해서 반올림을 하는 것이 아닌, render메소드에서 원래의 state를 다시 가공하여 보여주고 있습니다.

*map함수를 통해 배열을 리턴하는 부분은 여기를 보시면 이해할 수 있습니다*.

![브라우저 상에서의 모습](https://3334242005-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LV81lySVctD2m2qG3Ob%2F-LbYiPnWc6BeB68jS8gN%2F-LbYj2EQk2uXu1se4J3J%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202019-04-04%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2012.05.46.png?alt=media\&token=dff5fe3b-0945-4cd8-9d6d-d3989f52f923)

### Render 메소드 안에서 DOM 요소 컨트롤하기

render메소드는 JSX를 HTML로 변환해 브라우저에 붙이는 과정을 수행하기 때문에 당연히 DOM요소를 직접 getElementById같은 키워드로 가져와 데이터를 추가하거나 값을 변경하는 등의 행동은 불가능 합니다.

**불가능 합니다.** 시도하지 마세요. render 메소드 내에서 DOM요소를 컨트롤 할 수도 있을지도 모르나, 이는 안전한 작업이 아닙니다. 추후에 직접 DOM을 컨트롤 하기 좋은 메소드에서 자세히 알아보도록 할 것입니다.