인프런 커뮤니티 질문&답변

작성한 질문수

프로젝트로 배우는 React.js

36 블로그 db에서 받아와서 화면에 보여주기

return (<div></div>)

작성

·

291

0

return <LoadingSpinner />

어떤 경우에는 () 괄호를 치고 return 을 하고,

어떤 경우에는 < /> 태그만 치고 return 을 하는데 그 차이가 뭔

가요?

react redux es6

답변 2

0

지식공유자

() 이 괄호 안에 있는 결과 값이 리턴 되는거예요

이 경우에는
return (<LoadingSpinner />) 괄호 안에 jsx를 리턴하게 되는거고

이 경우에는

return (isAdmin ? <LoadingSpinner /> : 1)

isAdmin이 true이면 <LoadingSpinner />라는 jsx를 리턴하고 false 일 경우 1을 리턴하게 되는거죠

0

지식공유자

return <LoadingSpinner /> 는 jsx를 리턴
return (<LoadingSpinner />) 괄호 안에서 자바스크립트 코드 사용 가능

더 깔끔
return <LoadingSpinner /> vs return (<LoadingSpinner />)
첫번째가 더 깔끔합니다

2. 자바스크립트 코드 사용

const isAdmin = true;
return (isAdmin ? <LoadingSpinner /> : <div>일반유저</div>)

이런식으로 자바스크립트 사용 가능합니다

질문자

두 코드의 표현식 어디든 허용된다는 말씀이신가요!?

어떤 경우에는 jsx 로 표현,

어떤 경우에는 자바스크립트 로 표현이 아니라요..?

질문자

추가로 질문하나더 합니다.

useState() 호출해서

앞에 변수 할당할 때, [변수, set변수] 이렇게 선언해도록 하는 구조가..

변수 값이 변경 되었을 때, 화면에 반영이 안되잔아요.

set변수를 통해서 변수의 값을 변경해서 반영시켜주잔아요.

제 질문이 원에이, 투웨이 바인딩과 관계가 있습니까?

지식공유자

useState를 사용하면 화면에 반영이 되게 하는거고 양방향은 아니죠 변경 하면 화면만 변경되니깐요.

양방향 바인딩은 input이 변경 되었을때 양방향 바인딩이라고 할수 있겠습니다
const [value, setValue] = useState('');

<input value={value} onChange={(e) => {setValue(e.target.value}} />

질문자

왜 useState 를 써서 화면에 반영시키도록 하는건가요?

일반적으로 모델에 바인딩 된 값을 변경해주면 ..

모델을 양방향 설정으로 해준다면 저절로 화면에 반영될 일이 아닌가요?

참고로 전 다른 프론트엔드 언어를 쓰다가 와서 그런지

조금 낫설어서 여쭤봅니다.

useState에 대한 코지님의 의견이 듣고싶어서 질문을 드리는 이유이기도 합니다.

지식공유자

어떤 프레임워크 쓰다 오셨나요?

다른 프레임워크도 다 자바스크립트를 써서 같은 원리인데 편의성이 다를수 있습니다

뷰js를 예로 들면 v-model이 있죠

근데 리액트에는 이런 속성이 제공 되지 않습니다

질문자

sap ui5 라는 언ㅇㅓ입니다.

많이 생소하지만, 웹단 프론트언어랑 상당히 비슷하다고 들었스빈다.

질문자

답변주신거 곱씹어보면서 생각정리해보겠습니다. 감사함다

질문자

하나만 더 물어봅니다.

{ isEditied() }

이것과

{ isEdited } 는 같은 거죠..?

작성한 질문수