useEffect()는 클래스형 컴포넌트에서의 componentDidMount(), componentDidUpddate(), componentWillUnmount()메서드와 비슷한 역할을 하는hook으로, 컴포넌트가 렌더링이 된 이후(또는 제거되기 전) 특정 작업(Side Effect)을 수행하도록 할 수 있는 함수. ※ Side Effect란? 함수 내부의 어떠한 구현이 함수 외부에 영향을 끼치는 경우, 해당 함수는 Side Effect를 가진다고 말할 수 있음. Side Effect를 가지는 함수는 입력이 같다하더라도 결과는 달라질 수 있음. 이와 반대로 Side Effect 없이 함수의 입력이 같을 때 결과도 동일한 함수를 순수 함수라고 함. ex. Fetch API, localStorage, Se..
1. 어느 컴포넌트에서 AJAX 요청을 할 것인가? React에서 AJAX 요청을 통해 데이터를 불러올 때, 웹페이지 전체 골격을 먼저 구성한 후 데이터 부분만 요청해야 SPA를 구현할 수 있음. Fetch API를 사용할 때 데이터를 받고 나서 화면을 구성하는 게 자연스러울 것 같지만, 그렇게 하면 데이터를 전부 불러올 때까지 사용자가 빈 화면을 봐야 하므로 바람직하지 않음. // index.js에서 Fetch 요청: 이렇게 하면 안 됨! fetch("http://localhost:1000/posts") .then(data => data.json()) .then(tweets => { // 데이터를 불러오고 나서 React Root 컴포넌트 렌더링 ReactDOM.render( , document.get..
1. React 컴포넌트 구성 A. 컴포넌트 작성 const LogIn = () => { return ( 유저명 input(e, "ID")} /> ) } 1. 요소 안에 필드, 요소를 넣고 onSubmit 속성 부여. 이때 button 요소에 onClick 이벤트 속성을 주지 않도록 주의! 요소를 두고 요소에 onClick 속성을 두면 요소와 form이 연결되지 않았다는 주의 메시지가 뜨면서 전송 이벤트가 발생하지 않음. 2. 요소의 type 속성으로 "submit" 지정 B. onSubmit 이벤트 핸들러 작성 const submitLogin = async (e) => { e.preventDefault(); const url = 'http://localhost:3000/' // 요청을 전송할 서버 주소..
1. useMemo() # function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const { username, email } = inputs; const count = countActiveUsers(users); return ( 활성사용자 수 : {count} ); }; 텍스트 상자 username, email에 텍스트를 입력하면 App의 state인 inputs가 변하므로 App() 컴포넌트가 반복적으로 호출됨. 그 과정에서 중간의 countActiveUsers() 또한 반복적으로 실행되는데 사용자의 수가 변하지 않을 때에는 countActiveUser()를 실행할 필요가 없음. 이렇게 컴포넌트 내부의 함..
중첩된 구조의 컴포넌트를 만들었을 때 하위 컴포넌트로 전달해줘야 할 Props가 많아지게 되면 중간에 있는 모든 컴포넌트를 거쳐 Props를 전달해야 하므로 유지보수 하기가 어려워지고 새 Props를 추가하기가 번거로워짐. 더군다나 중간에 끼인 컴포넌트가 해당 Props를 이용하지 않고 단지 하위 컴포넌트에 전달하는 역할만 하는 경우 이러한 문제를 해결해야 할 필요성이 높아짐. 이렇게 해당 Props를 필요로 하는 하위 컴포넌트까지 Props를 전달하기 위해 그 사이의 컴포넌트에 전달하는 과정이 드릴을 뚫는 것과 같아 Props Drilling이라고 함. 예를 들어, 컴포넌트 구조가 상위 컴포넌트부터 App - TaskListSection - Task로 되어 있을 때 App 컴포넌트에서 deleteTas..
1. Props vs. State React에서 컴포넌트 재렌더링을 유발하는 데이터에는 Props와 State가 있는데, Props는 함수의 argument, State는 함수의 local variable로 생각할 수 있음. Props State 해당 컴포넌트 내에서 변경할 수 있는가? X O 부모 컴포넌트에서 변경할 수 있는가? O X 자식 컴포넌트 내에서 변경할 수 있는가? X X A. Props 부모 컴포넌트로부터 전해지는(하향식) 읽기 전용 속성. Props를 전달받은 컴포넌트 내부에서 변경 불가하며, 부모 컴포넌트에서 업데이트해 전달받는 것만 가능. Props는 부모 컴포넌트의 State이기 때문에 Props는 읽기 전용이어야 함. 만약, 자식 컴포넌트에서 Props를 변경하게 된다면 동일한 정..
1. 사용자 정의 컴포넌트 구성 /* 1. Welcome 컴포넌트: class 표현 */ class Welcome extends React.Component { render() { return Hello, {this.props.name}; }; }; /* 2. Welcome 컴포넌트: 함수 표현 */ function Welcome (props) { return Hello, {props.name}; } JSX에서 처럼 작성된 코드에서 Welcome 컴포넌트가 호출되는데, JSX의 속성(여기서는 name, id, className)은 props라는 객체의 한 속성으로 전달됨. Welcome의 render() 내부에서 console.log(this)를 넣으면 위와 같이 props 객체를 볼 수 있음. Reac..
JavaScript/React 2022. 6. 17. 09:49
useEffect()는 클래스형 컴포넌트에서의 componentDidMount(), componentDidUpddate(), componentWillUnmount()메서드와 비슷한 역할을 하는hook으로, 컴포넌트가 렌더링이 된 이후(또는 제거되기 전) 특정 작업(Side Effect)을 수행하도록 할 수 있는 함수. ※ Side Effect란? 함수 내부의 어떠한 구현이 함수 외부에 영향을 끼치는 경우, 해당 함수는 Side Effect를 가진다고 말할 수 있음. Side Effect를 가지는 함수는 입력이 같다하더라도 결과는 달라질 수 있음. 이와 반대로 Side Effect 없이 함수의 입력이 같을 때 결과도 동일한 함수를 순수 함수라고 함. ex. Fetch API, localStorage, Se..
JavaScript/React 2022. 6. 13. 15:03
1. 어느 컴포넌트에서 AJAX 요청을 할 것인가? React에서 AJAX 요청을 통해 데이터를 불러올 때, 웹페이지 전체 골격을 먼저 구성한 후 데이터 부분만 요청해야 SPA를 구현할 수 있음. Fetch API를 사용할 때 데이터를 받고 나서 화면을 구성하는 게 자연스러울 것 같지만, 그렇게 하면 데이터를 전부 불러올 때까지 사용자가 빈 화면을 봐야 하므로 바람직하지 않음. // index.js에서 Fetch 요청: 이렇게 하면 안 됨! fetch("http://localhost:1000/posts") .then(data => data.json()) .then(tweets => { // 데이터를 불러오고 나서 React Root 컴포넌트 렌더링 ReactDOM.render( , document.get..
JavaScript/React 2022. 6. 9. 21:28
1. React 컴포넌트 구성 A. 컴포넌트 작성 const LogIn = () => { return ( 유저명 input(e, "ID")} /> ) } 1. 요소 안에 필드, 요소를 넣고 onSubmit 속성 부여. 이때 button 요소에 onClick 이벤트 속성을 주지 않도록 주의! 요소를 두고 요소에 onClick 속성을 두면 요소와 form이 연결되지 않았다는 주의 메시지가 뜨면서 전송 이벤트가 발생하지 않음. 2. 요소의 type 속성으로 "submit" 지정 B. onSubmit 이벤트 핸들러 작성 const submitLogin = async (e) => { e.preventDefault(); const url = 'http://localhost:3000/' // 요청을 전송할 서버 주소..
JavaScript/React 2022. 6. 6. 17:54
1. useMemo() # function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const { username, email } = inputs; const count = countActiveUsers(users); return ( 활성사용자 수 : {count} ); }; 텍스트 상자 username, email에 텍스트를 입력하면 App의 state인 inputs가 변하므로 App() 컴포넌트가 반복적으로 호출됨. 그 과정에서 중간의 countActiveUsers() 또한 반복적으로 실행되는데 사용자의 수가 변하지 않을 때에는 countActiveUser()를 실행할 필요가 없음. 이렇게 컴포넌트 내부의 함..
JavaScript/React 2022. 6. 5. 21:01
중첩된 구조의 컴포넌트를 만들었을 때 하위 컴포넌트로 전달해줘야 할 Props가 많아지게 되면 중간에 있는 모든 컴포넌트를 거쳐 Props를 전달해야 하므로 유지보수 하기가 어려워지고 새 Props를 추가하기가 번거로워짐. 더군다나 중간에 끼인 컴포넌트가 해당 Props를 이용하지 않고 단지 하위 컴포넌트에 전달하는 역할만 하는 경우 이러한 문제를 해결해야 할 필요성이 높아짐. 이렇게 해당 Props를 필요로 하는 하위 컴포넌트까지 Props를 전달하기 위해 그 사이의 컴포넌트에 전달하는 과정이 드릴을 뚫는 것과 같아 Props Drilling이라고 함. 예를 들어, 컴포넌트 구조가 상위 컴포넌트부터 App - TaskListSection - Task로 되어 있을 때 App 컴포넌트에서 deleteTas..
JavaScript/React 2022. 5. 31. 19:32
1. Props vs. State React에서 컴포넌트 재렌더링을 유발하는 데이터에는 Props와 State가 있는데, Props는 함수의 argument, State는 함수의 local variable로 생각할 수 있음. Props State 해당 컴포넌트 내에서 변경할 수 있는가? X O 부모 컴포넌트에서 변경할 수 있는가? O X 자식 컴포넌트 내에서 변경할 수 있는가? X X A. Props 부모 컴포넌트로부터 전해지는(하향식) 읽기 전용 속성. Props를 전달받은 컴포넌트 내부에서 변경 불가하며, 부모 컴포넌트에서 업데이트해 전달받는 것만 가능. Props는 부모 컴포넌트의 State이기 때문에 Props는 읽기 전용이어야 함. 만약, 자식 컴포넌트에서 Props를 변경하게 된다면 동일한 정..
JavaScript/React 2022. 5. 23. 20:04
1. 함수형 컴포넌트 vs. 클래스형 컴포넌트 /* 1. Welcome 컴포넌트: class 표현 */ class WelcomeC extends React.Component { render() { return Hello, {this.props.name}; }; }; /* 2. Welcome 컴포넌트: 함수 표현 */ function WelcomeF ( {name} ) { return Hello, {name}; } A. Props 값 전달하기 const props = { name: "Sara" } 위와 같은 props를 컴포넌트에 전달하기 위해서는... ① 함수형 컴포넌트 function WelcomeF ( {name} ) { return Hello, {name}; } /* 1. 함수 실행식 이용 */ R..
JavaScript/React 2022. 5. 17. 20:48
1. 사용자 정의 컴포넌트 구성 /* 1. Welcome 컴포넌트: class 표현 */ class Welcome extends React.Component { render() { return Hello, {this.props.name}; }; }; /* 2. Welcome 컴포넌트: 함수 표현 */ function Welcome (props) { return Hello, {props.name}; } JSX에서 처럼 작성된 코드에서 Welcome 컴포넌트가 호출되는데, JSX의 속성(여기서는 name, id, className)은 props라는 객체의 한 속성으로 전달됨. Welcome의 render() 내부에서 console.log(this)를 넣으면 위와 같이 props 객체를 볼 수 있음. Reac..