실무용 폴더구조(container / presenter)
프로젝트를 만들때 폴더 구조는 굉장히 중요합니다.
실무에서 사용하는 폴더 구조는 여러가지 방법이 존재하는데, 이러한 방법들을 패턴이라고 부릅니다.
리액트에서 사용하는 유명한 패턴으로는 container / presentational 패턴과 atomic 패턴이 있습니다.
1. container / presentational 패턴
container / presentational 패턴이란, 소스코드를 자바스크립트(기능)와 JSX (UI)로 나누는 방법을 의미합니다.
여기서 container는 자바스크립트(기능) 부분을 의미하고, presentational은 JSX(UI) 부분을 의미합니다.
위 파일을 2개의 파일로 나누는 방법은 아래와 같습니다.
💡 부모 컴포넌트와 자식 컴포넌트
→ import되어 불려가는 컴포넌트를 자식 컴포넌트라고 합니다.
반면 import하여 불러오는 컴포넌트를 부모 컴포넌트라고 합니다. 자식컴포넌트는 부모 컴포넌트 안에 포함되는 구조 입니다.
레벨업!
💡 JSX란 무엇인가요?
→ JavaScrip Xml의 약자로 자바스크립트의 확장 문법입니다.
리액트에서는 virtual DOM을 다루고 있기 때문에 html을 가장한 JSX를 사용해야 합니다.
JSX는 브라우저에서 실행되는 과정에서 자바스크립트 언어로 바뀌게 됩니다.
리액트에서의 html이라고 생각하시면 됩니다.
2. atomic 패턴
atomic 패턴이란, 소스코드를 아주 작은 컴포넌트 단위로 먼저 쪼개는 방법을 의미합니다.
이렇게 하는 이유는 컴포넌트의 중복을 최소화하기 위함입니다.
총 5개의 폴더 구조로 이루어지며, 각각의 의미는 화학의 원리를 이용하여 만듭니다.
atoms, molecules, organisms, templates, pages 이렇게 5개의 폴더로 나누어서 컴포넌트들을 관리하게 됩니다.
atomic 패턴은 디자이너분들의 세계에서도 널리 알려진 패턴입니다.
따라서, atomic 패턴을 사용하면 디자이너분들과 협업에 유리해질 수 있고, 프로젝트 시작부터 체계적인 UI적 설계가 가능해집니다.
하지만, 프로젝트 시작부터 UI를 디자이너분과 함께 전체적으로 설계해야하므로 실제 개발준비까지 걸리는 시간이 오래 걸릴 수 있습니다.
따라서, 시간, 비용, 팀의 상황 등에 따라서 적용하는 것이 일반적입니다.
레벨업!
💡 추가학습주제
Atomic 패턴의 장점과 단점은 무엇인가요?
state 리렌더
리액트가 리렌더하는 방식
setstate는 비동기로 작동 합니다.
setState가 동기로 작동하게되면 변경될때마다 바로 바로 렌더링을 하기 때문에 비효율적입니다.
따라서 임시 저장소에 모아두었다가 코드를 끝까지 읽고 한번에 바꿔서 렌더링합니다.
레벨업!
💡 리렌더가 되는 상황
1. 새로운 props가 들어올 때
2. 부모 컴포넌트가 렌더링 될 때
3. 강제 업데이트(forceUpdate)가 실행될 때
4. state가 변경될 때
레벨업!
💡 setstate의 비동기적 특성
아래의 버튼을 클릭하면 어떤값이 나올까요?
→ 정답은 1입니다.
이는 setState가 비동기적 특성을 갖기때문입니다.
(동기적으로 작동했다면 코드를 읽고 바로 내려가서 또 1을 더하고 또 1을 더해 3이 나왔을 것 입니다.)
export default function stateTest(){
const [value,setValue]=useState(0)
const onClick = () => {
setValue(value+1)
setValue(value+1)
setValue(value+1)
}
return (
<div className="App">
<button onClick={onClick}>+</button>
<h1>{value}</h1>
</div>);
}props
컴포넌트를 2개로 나누면서 데이터와 기능의 연결고리가 끊어지게 됩니다.
이를 props가 연결해주게 되며, props는 부모가 가지고 있는 변수 , 함수를 자식한테 물려주는 것 입니다.
부모 컴포넌트가 props를 물려줄때는 객체로 묶어서 넘기게 됩니다.
props를 내려주기 _ 부모 컴포넌트
자식 컴포넌트 태그의 propsName부분을 잘 봐주세요!
//부모 컴포넌트 _ container 부분
const BoardWrite = ()=>{
const [writer, setWriter ] = useState()
const handlechangeWriter = (e)=>{
writer = e.target.value
setWriter(writer)
}
return(
// 자식 컴포넌트 _ presenter 컴포넌트
// 본격적으로 props를 내려주는 부분입니다.
<BoardWriteUI propsName={handlechangeWriter}/>
)
}위와 같이 props를 넘기게 되면, props = { propsName : handlechangeWriter } 형태의 객체로 넘어가게 됩니다.
또한 props는 여러개를 내려 줄 수 있습니다.
props 받아오기
Writer 태그의 이벤트 함수부분(onChange)을 잘 봐주세요
//자식컴포넌트 _ presenter 부분
//파라미터 부분에 props를 적어주셔야 받아 올 수 있습니다.
const BoardWriteUI = (props)=>{
return(
<Wrapper>
<Writer
type = "text"
placeholder = "작성자를 적어주세요"
// 본격적으로 props를 내려받는 부분입니다.
onChange = {props.propsName}
/>
</Wrapper>
)
}파라미터 부분에 props를 적지 않으면 받아 올 수 없으니 주의 해주셔야 합니다.
또한 객체로 넘어오기 때문에 받아온 props를 사용하려면 객체의 속성을 꺼내오는 것 처럼 사용해주셔야 합니다. 따라서 props.propsName 형태로 사용해야 합니다.
리액트의 단방향 데이터 흐름
리액트는 데이터 흐름이 단방향 구조입니다.
흐름이 단방향이라는 것은 props가 부모에서 자식으로만 흐른다는 것 입니다. 물론 나중에 상태관리 라이브러리를 사용하면 우회하는 방법은 있지만 기본적으로는 부모에서 자식으로만 흐릅니다.
리액트의 데이터 흐름이 단방향 구조이기때문에 우리가 에러를 캐치하기가 더 쉽고, 보기에 더 깔끔합니다.
💡 댓글 수정/삭제 시 모든 댓글이 수정/삭제 됩니다!
우리가 작성한 코드를 먼저 보겠습니다. 하나의 state로 댓글 각각의 아이디를 관리하고 있어서 댓글을 수정/삭제하기 위해 해당 아이디 값을 가져오게 되면 댓글 하나하나의 아이디 값을 모두 가져와서 한 번에 수정 삭제가 됩니다. 이러한 불편함과 성능적인 문제를 해결하기 위해서는 어떻게 해야할까요?
단순하게 댓글 하나하나의 state 값이 따로 관리되도록 해주면 될텐데요.
그렇다고 아이디 값을 따로 관리하도록 state를 하나씩 모두 만들어주게 되면 댓글이 늘어날 때마다 state를 선언해준 코드도 늘어나서 코드가 길어지게 됩니다.
방법은, 댓글을 보여주기 위해 map을 해준 부분에서 댓글 아이템을 하나의 컴포넌트로 분리시켜 불러와주는 방법인데요.
이렇게 하면 댓글 각각의 스테이트가 따로 만들어져 효율적이고 유지/보수가 쉬워집니다.
앞으로 이런 방식으로 작동되는 코드들을 만나게 될 수 있으니 아이템을 하나의 컴포넌트로 분리해서 관리해주기! 꼭 기억해주세요.
state 끌어올리기
React의 데이터 흐름은 상위 컴포넌트에서 하위 컴포넌트로 전달하는 하향식, 단방향 데이터 흐름을 따르고 있습니다.
그렇다면 단방향 데이터 흐름의 장점은 무엇일까요?
우선, 기능 변경 사항에 대한 코드 수정이 적어집니다. 또한 복잡하지 않아 코드의 흐름을 알기 쉽다는 점입니다.
하지만 이 방식은 상위 컴포넌트에서 전달 받은 데이터의 형태나 타입만 알 수 있고, state에서 온건지 하드코딩으로 입력 받은 내용인지는 알 수 없습니다.
우리가 하위 컴포넌트의 이벤트로 상위 컴포넌트의 상태를 바꾸어 주려면 어떻게 해야할까요?
바로 상위 컴포넌트의 상태변경 함수를 하위 컴포넌트에 전달 시켜 실행시키는 것 입니다.
