2주차.. 주말에 생활패턴에 적응하느라 힘들었던 몸을 그나마 좀 쉴.... 수 있(지 않았다)는 시간을 가지고 2주차가 시작됬다.

삼항연산자

저번주에 잠시 배운 ..또는 짚고 넘어간 삼항연산자.. 솔직히 썩 익숙하지는 않은 기호이다..여전히 익숙하지 않은 것 같다. 알고리즘 문제를 풀면서 몇번 본 기억이 있는 정도인지라..일단 다시 짚고 넘어갔다.

(조건문) ? 조건이참일 때 랜더링 : 거짓일 때 랜더링
data ? data.fetchProfile : undefined

data는 동기적으로 받아와야 하는 값인지라
(저번 포스팅에서 데이터가 비동기 랜더링일 때의 경우를 짚고 넘어간 적이 있다.)

비동기적 랜더링을 사용 한다고 했다.위의 코드는
데이터가 없을 때는 undefined, data가 들어오면 data.fetchprofile을 다시 랜더링 해준다.

삼항연산자가 있긴하지만, 간결한 코드를 위해 && 연산자를 주로 사용한다고 한다.(&& 대신 || 도 사용한다고 합니다.)

본격적으로 월요일(작성일 기준 어제긴하다.)에 배운 내용은 이렇다.

어쨌든간에 여태껏 html, css, js 를 한 파일에 몰아서 썼는데.. 막상 적고나니 너무 길어서..

(아무것도 모르는 내가봐도 가독성이 매우매우매우 떨어진다.
위의 사진 수준까진 아니지만 어쩄든 정리하면 좋으니까..?)

유지보수를 및 재활용을 목적으로 컴포넌트의 형식으로 파일을 분리하는 법을 배웠다.

Container/Presentational 패턴

컨테이너, 프레센테이셔널 형식.. 소스코드를 기능(js)와 JSX(HTML)로 나누는 방법을 의미한다.

위의 사진처럼 나뉘게 된다. 서로 찢어지면 하나의 메인페이지(주로 새로운 폴더의 index.js)로 import되게 되는데, 이 때의 index.js를 부모컴포넌트, 각자 찢어진 js, JSX 는 자식 컴포넌트 라고 한다.

내용 자체는 그리 어렵지 않지만..문제가 하나있다면 각자 찢어진 부분에 선언 되어있는 함수나변수를 사용하려면 다시 각각 변수들을 다시 선언해야하는가..정도인데 이 문제를 해결하기 위한 도구로 props라는 개념이 들어왔다.

props

//부모 컴포넌트 _ container 부분

const BoardWrite = ()=>{
const [writer, setWriter ] = useState()
const handlechangeWriter = (e)=>{
writer = e.target.value
setWriter(writer)
}

		// 자식 컴포넌트 _ presenter 컴포넌트 
		// 본격적으로 props를 내려주는 부분입니다.
		<BoardWriteUI propsName={handlechangeWriter}/>
	     )
      }

```		return(
```			<Wrapper>
```				<Writer
```					type = "text"
```					placeholder = "작성자를 적어주세요"
```					// 본격적으로 props를 내려받는 부분입>```니다.
```					onChange = {props.propsName}
```					/>
```			</Wrapper>
```		)
```}

이런식으로 사용한다고 한다. (직접 써봐야 이해하는 편인지라 ..아직은 좀..)

Day6 후기

죽겠습니다. 머리 들어오(려는)는 양이 너무많아요