반응형 컴포넌트3 👀 컴포넌트 렌더링하기 #3 이번 포스팅은 컴포넌트의 랜더링 방법에 대해 살펴보려한다. 컴포넌트가 렌더링되는건 return문을 결과로 렌터링한다. 다양한 방법인 조건식이나 리스트의 기능을 활용한 렌더링 방법에 대해 알아보자. 조건식 렌더링 조건식이라고하면 일반적으로 if문, &&, || 가 떠오른다. js에서는 삼항연사자를 지원한다. 간단하게 삼항연산자에 대해 설명하고 넘어가도록하겠다. // if문을 사용한 isOK 값 할당 const type = "ok" let isOk = false; if(type === "ok"){ isOk = true; } //삼항연산자를 사용한 값 할당 const isOk = type ==="ok"? true:false; 위의 코드와 같이 if문을 삼항연산자를 이용하면 간단하게 표현가능하다. 다음은 위의 .. 2023. 12. 23. 👀 컴포넌트 구성하기 #2 컴포넌트 구성하기 #1 이번 포스팅은 React를 사용하여 React 방식의 컴포넌트 구성을 하는 방법에 대해 포스팅해보려 한다. 웹에서는 HTML의 태그를 활용하여 다양한 구조의 컴포넌트를 작성할 수 있다. React는 해당 태그 nubee.tistory.com 지난 포스팅에 이어서 만든 컴포넌트를 더욱 편리하게 사용하기 위한 방법을 알아보자. 다시 한번 언급하는 것이지만 React는 재사용성을 높이는 것에 목표가 있다. 그렇기 때문에 재사용성을 높이는 방법에 대해 알아보도록 하겠다. 컴포넌트 분리하기 이전에 만든 컴포넌트는 하나의 .jsx 파일에서 2개의 function를 작성하였다. 하지만 아래와 사진과 같이 공식 문서에 따르면 한 가지에 기능에 귀속된 것이 아닌 다양한 방면으로 사용할 수 있는 컴.. 2023. 12. 22. 👀 컴포넌트 구성하기 #1 이번 포스팅은 React를 사용하여 React 방식의 컴포넌트 구성을 하는 방법에 대해 포스팅해보려 한다. 웹에서는 HTML의 태그를 활용하여 다양한 구조의 컴포넌트를 작성할 수 있다. React는 해당 태그로 구성된 컴포넌트를 재사용이 가능한 UI 요소 재정의하여 사용할 수 있게 도와준다. 그러나 이렇게 얘기하면 어떤 소리인지 와닿지 않는다. 그래서 아래의 예제를 살펴보도록 하자. 일반적인 HTML의 컴포넌트 구성방법 아래의 코드는 HTML로 구성한 간단한 예시이다. 우리는 일반적으로 아래와 같은 방식으로 HTML 코드를 사용하여 페이지를 구성한다. React를 사용한 컴포넌트 구성방법 React를 사용하면 아래와 같이 재사용이 가능한 컴포넌트를 작성하여 사용하면 코드 훨씬 간결하게 작성할 수 있다. .. 2023. 12. 22. 이전 1 다음 반응형
