TIL 23.01.20

오늘은 React 라이브러리를 설치하고 과제를 진행하였다.

 

React는 프론트엔드 개발을 위한 JS 라이브러리이며,

선언형, 컴포넌트 기반의 특징과,

프레임워크와 달리 기존 프로젝트에서도 유연하게 적용이 가능한 장점을 가지고 있다.

 

React에서는 JS가 아닌 JSX를 사용하는데,

JSX 형태는 브라우저가 바로 실행이 불가능하기 때문에,

'Babel'을 사용하여 JSX->JS로 컴파일하여 브라우저가 읽을 수 있게한다.

 

 

과제를 진행하면서 JSX규칙 중에 헷갈리는 내용이 있었다.

특정 사용자인지에 따라서 다른 className을 적용시켜, style을 변경시켰어야 했는데

{} 내부에 if문을 사용하여서 풀어야할지 헷갈렸다.

 

관련 내용를 찾아보니, 주로 삼항연산자를 통해서 조건에 따라 className을 변수에 저장하여

사용하는 것을 볼 수 있었다.

 

그래서 함수내부에 className의 이름을 저장해주는 변수를 만들고,

반환하는 div의 className을  {}를 이용하여 변수로 지정해주었다.

ex) <div className = {name}> </div>

 

 

아래와 같이 특정 이름만, 보라색 처리되어있는것을 볼 수 있다.

 

-끝-