안녕하세요

(1) 컴포넌트와 데이터 구조 리액트에서는 같은 레벨에서 데이터를 주고받는 것이 불가능 합니다. 부모에서 자식으로 내려가는 단방향으로방 데이터를 전달할 수 있습니다. 이를 트리형 구조라고 합니다. (2) 데이터를 전달하는 방법 부모에서 만든 [data, setData] = useState();를 이용하여 data와 setData를 각각의 자식에게 하나씩 전달하면 됩니다. data는 DiaryList로 전달하고 setData는 DiaryEditor로 전달하여 수정하는 방식으로 같은 레벨간에 state를 수정하고 렌더링하게 됩니다. 다시 말해, setData와 같은 Event는 부모로 올려 보내고, data는 아래로 내려보내는 구조라 할 수 있습니다. state 끌어올리기라고 할 수 있습니다. (역방향 Ev..

(1) onChage 함수와 e.target 매개변수로 자기 자신의 속성에 접근할 수 있습니다. { console.log(e.target.value); }} /> e.target.value와 같이 접근할 속성인 value를 선택할 수 있습니다. (2) input 태그가 한 줄의 입력창을 만든다면 textarea는 여러 줄의 입력창을 만들 수 있습니다. { setContent(e.target.value); }} /> (3) 역할이 비슷하다면 state를 묶어서 사용하면 됩니다. const DiaryEditor = () => { const [state, setState] = useState({ author: "", content: "", }); (4) 객체를 통째로 업데이트 하는 것이기 때문에 target...

1. state란 무엇인가? state는 컴포넌트가 갖는 값이 계속 바뀌는 동적인 데이터이고, 상태를 바꾸는 관리는 useState로 합니다. 2. props란? props는 부모에서 컴포넌트에 전달한 값입니다. 그러면 props는 Counter 컴포넌트 안에서 const Counter = (props) => { console.log(props) // 출력결과는 객체로 전달됩니다. // {a: 1, initialValue: 5} 하지만 전달하는 값이 많아지면 객체에 담아서 전달합니다. const counterProps = { a: 1, b: 2, c: 3, d: 4, e: 5, initialValue: 5, }; 객체는 스프레드 연산자로 펼쳐서 전달합니다. Counter.defaultProps 로 오류를..

1. JavaScript 싱글스레드 작업 수행 방식 코드가 작성된 순서대로 한 번에 하나의 작업을 실행합니다. 이를 동기 방식의 처리라고 부릅니다. A(1초) B(10초) C(15초) 의 작업이 있다면 C를 처리하기까지 걸리는 시간은 15초만을 기다리는 것이 아니라 A -> B -> C 순서대로 결과를 다 가져온 뒤에 C를 처리하여 A+B+C 총 26초를 기다리게 됩니다. 2. 비동기 작업 수행 방식 동기 방식의 처리의 단점을 극복하기 위해서 여러 개의 작업을 동시에 실행시킵니다. 작성된 코드의 "결과를 기다리지 않고" 다음 코드를 바로 실행합니다. 그리고 작업이 끝나게 되면 그 때 결과를 나타나도록 합니다. func A setTimeout 1초 (cosnole.log(A 작업 끝)) func B set..