리액트 코딩, 기본 중의 기본

시작은 했다. 시작은…

시작은 좋은데 중간이 엉망이다. 이제 시작한 건데.. 처음에 개념 잡는 게 어렵지란 생각으로 시작한 건데.. 일단은 좀 더 개념을 잡는 부분부터 접근하게 맞을 것 같다는 생각이 들었다. 분명 들쭉날쭉 거리겠지만.

그래서 JSX란..? 아니 리액트에서 코딩할 때

공식문서에도 나와 있지만, 굳이 JSX를 사용하지 않고 그냥 ES6(JS) 만으로도 리액트를 동작시킬 수 있다. 그럼 왜 귀찮게 만드는 걸까.

일단 VSCODE에서 JSX를 사용하면 HTML 태그의 스니팻이 잘 동작한다는 것을 알 수 있었다. 그런데 JS에서는 그렇지 않다. 익숙한 사람은 모르겠지만, 익숙하지 않은 사람은 은근히 귀찮고 흐름이 깨지는 경향이 간혹 생기는데 툴들이 좋아지면서, 자동기능이 충실해지면서 생긴 일종의 병폐일지도 모르겠다.

어쨌건 리액트 코딩은…

• jsx가 사용 가능하다. 파일 확장명이 jsx이기도 하다. 당연히 js가 기본이 된다.
• jsx는 javascript 파일 안에서 HTML을 작성할 수 있다.
• CSS로 style을 적용하기 위한 몇 가지 방법이 있지만.. 기본적으로는
  • CSS Class를 적용하기 위해선 className을 사용해야 한다.
  • style을 직접 적용하기 위해선 style={{padding:'10px'}} 형식을 사용해야 한다.

  <div className="example" style={{
  	padding: '10px',
  	fontSize: '1rem'
  }}>

• 리액트의 return 문에서 한 줄 작성 시에는 상관없는데 두줄부터는 ()를 사용해서 감쌀 필요가 있다.

return <div>...</div>

• return () 안에서는 형제요소가 있을 수 없다. 컴포넌트의 최상위에 형제로 존재해야 할 경우 <></>처럼 비어있는 태그를 사용해서 감싸주면 된다.

// BAD
return (
	<p>...</p>
	<p>...</p>
)

// GOOD
return (
	<>
		<p>...</p>
		<p>...</p>
	</>
)

아마도 이게 가장 기본 중의 기본(?)일 것 같다. 기본부터 하나씩. 놓친 건 나중에 추가하고..

record 6

리액트~ 리액트~

이전에는 몰랐던 것을 하나씩 알아가는 건 즐겁지만, 그 난이도가 그동안 익혀온 지식보다 높은 위치에 있을 경우 허덕거리게 된다. 이미 스크립트에 익숙했던 사람들의 러닝커브는 그리 크지 않겠지만 나와 같은 포지션의 인물들에게는 확실히 높은 감이 있다. 그래도 일단 하나씩 정리해 나가면서, 아웃풋을 만들면서 글로 풀어낼 수 있다면 좀 더 지식으로 남을 것 같아 기록은 유지해야 하겠다.