[TIL] 23/11/03 React 입문: jsx문법, inline style 적용

숙제하려고 하니 또 의문이 잔뜩 들어서 강의 앞부분으로 돌아왔다.

TIL

[jsx 문법]

react component의 return 문에는 리액트 엘리먼트 1개만 리턴하도록 되어있는데...

// 예시1 : 
function App() {
	return  <div>엘리먼트</div>
}


//예시2 : 여러줄일 경우 소괄호()를 사용하고 하나의 <div>로 묶어준다.
function App() {
	const jsStr="자바스크립트 문법";
    return (
    <div className="element"> 
        <h1>제목</h1>
        <p> javascript문법은 : {jsStr} </p>
    </div> );
}

// 제목
// javascript문법은 : 자바스크립트 문법

 

이 엘리먼트 부분은  jsx 문법으로 쓴다.

변수나, 함수, javascript 문법을 사용하고 싶으면 중괄호{ } 안에 쓰면된다.

html의 class는 className로 적어줘야한다. (id는 id)

 

[인라인 style 적용] 

jsx 문법에서는 style을  json 형식의 객체로 넣어준다 : {key : "value", }
너무너무 어색한 부분.

연습해보자. 어제 standard반 과제에서 style을 포기했기 때문에 거기에 연습해봤다.

 

1. 기존 html 형식 : 잘봐두자..
<p style="color: orange; font-size: 20px;">orange</p>

 

2. {객체} 로 감싸서 적용 :
겉의 중괄호 { } 는 자바스크립트 문법을 사용하겠다는 뜻.

안에 중괄호 { } 는 객체라는 의미.

 

3. 너무 길면 객체를 변수로 빼서 적용 : 

변수명만 자바스크립트 문법을 사용하겠다는 중괄호 { } 안에 넣어준다.

 

어쨌든 결과물...

 

4. (주의 사항)

전체를 감싸는 div 에서 textAlign : "center" 로 가운데 정렬을 해주고 border를 적용해 준 모습이다.

여기서 주의할 부분은 스타일 객체 { } 안에 들어가는 style요소 이름들..

기존 css 에서 한 단어가 아니어서 " - " 가 들어가는 이름들은 아마도 카멜케이스 이름으로 바꿔줘야한다.

안그러면 에러 !

text-align 은 textAlign  background-color 는 backgroundColor 로 써주어야한다.

 

후후...... ^.^

---

한 일

• standard 반 숙제에 style 수정해보기
• standard 반 두번째 수업 (객체 메소드)

 

할 일

• 개인과제 : todo list 만들기 
• 예시페이지
• 
• 목표는  :
  • 이번에는 빨리구현하고, css도 열심히!!
  • 그리고 추가구현 하지말랬는데? 새로고침해도 남아있게, 쓸 수 있게 하고싶은데용 (local storage...)

 

부족한 점

• 오늘 집중이 흐리다. 숙제나 하자.
• javascript (클로저..) 복습도 하고싶었는데, 과제한다고 자꾸 밀린다.
• 아마 복습시간을 1시간정도 딱 정해서 복습을 하고 남은 시간에는 과제를 하는 편이 좋겠다.
• 알고리즘 공부 시간도 마찬가지 ! (이제 조가 생겼으니까.. 화이팅!)