1. 처음 nginx를 설치.
2. root에 html이 기본값으로 설정되어있다.
3. localhost:8080실행시 Welcome nginx 가 잘 뜨게된다.

   /opt/homebrew/etc/nginx/nginx.conf

   server {
    listen       8080;
    server_name  localhost;
    location / {
        root   html;
        index  index.html index.htm;
   }

   근데 저 html은 어디 있는것인가?

// 해당 명령을 내리면,
nginx -V 

// 이런 결과물이 있다.
...
--prefix=/opt/homebrew/Cellar/nginx/1.25.3
...

// 들어가보자
cd /opt/homebrew/Cellar/nginx/1.25.3

// 그리고 목록을 보자
ls -al

// 그러면, 이처럼 link가 걸려 있다.
html -> ../../../var/www

바로 저기 있는것이다.

슛

1. 레이업 슛
2. 슬램 덩크 슛
3. 3점 슛

   드리블

4. 달리기 드리블
5. 풰이크 드리블
6. 회전 드리블

먼저 이런식으로 기본기능들을 가진 슛과 드리블은 행동이라고 표현할 수 있습니다.

우리회사의 열정적인 기획팀장님의 요구사항이 추가되다 보면

1. 슛에 레이업슛의 로직이 살짝 수정된다거나,
2. 슛을 누르면레이업슛만 했는데 이게슬램덩크 슛으로 변경될수도 있고,
3. 드리블에 성큼성큼 드리블같은 새로운 놈이 추가 될 수도 있습니다.

이처럼 전략 패턴은

어떤객체(캐릭터)의 어떤행동(슛 or 드리블)을 쉽게 수정하고 변경할 수 있게 하는 패턴입니다.

기획 및 설계

기본적으로 이 농구게임에는 슛과 드리블이라는 기능이 들어가야 한다고 합니다. 그렇다면 슛과 드리블을 행동집합으로 볼 수 있겠군요. 이 행동집합에는 같은 슛이지만 여러 종류의 슛으로 나뉘니까요. 각 슛과 드리블에는 3개씩 다른 행동들이 있습니다. 캐릭터가 슛을 하거나 드리블을 할 때 동작하는 행동들이지요. 즉, 어떤 행동을 자유롭게 바꾸고자 할때 사용하면 좋다는 것입니다. 의식의 흐름대로 상속이나 단순 인터페이스를 사용해서 구현 할 수 있지만, 이건 나중에 시간이 되면 다루도록 하겠습니다.

각 행동들을 부모 클래스에 정의하지 않고, 클래스 집합으로 만들어서 분리함으로(인터페이스로 분리후 그 인터페이스를 구현하는 방식으로) 쉽게 행동변경을 할 수 있습니다. 그래서 setShoot(), setDribble()같은 함수를 부모클래스에 정의해주었습니다.

// 메인 클래스
//이런식으로 말이죠.
BasketBall 강백호 = new 강백호();
강백호.shoot(); // 슬램덩크 슛
강백호.setShoot(new Point3Shoot()); 
강백호.shoot(); // 3점 슛

부모 클래스 정의

public class BasketBall{

    ShootInterface shootInterface;
    DribbleInterface dribbleInterface;

    public function shoot(){
        shootInterce.shoot();
    }

    public function dribble(){
        dribbleInterface.dribble();
    }

    public function setShoot(ShootInterface si){
        shootInterface = si;
    }

    public function setDribble(DribbleInterface di){
        dribbleInterface = di;
    }
}

1. 행동 집합을 정의한 인터페이스를 선언해 줍니다. 이 부모 클래스를 상속받은 인스턴스에서는 여기 있는 인터페이스 타입으로 행동을 할당해줍니다.

   // 인스턴스 클래스
   public class 강백호 extends BasketBall{
      __constructor(){
          shootInterface = new SlamdunkShoot();
          dribbleInterface = new Dribble();
      }
   }

2. 각 행동들의 실제 구현은 외부 클래스로 위임해주었으므로, 이 행동들을 호출할 수 있는 함수를 선언해 주었습니다(shoot(), dribble()).

   // 메인 클래스
   BasketBall 강백호 = new 강백호(); 
   // 위 강백호 클래스에서 
   // shootInterface에 SlamdunkShoot(); 을 할당한 게 보입니다.
   // SlamdunkShoot클래스의 shoot(); 함수에서 실제 구현을 맡고 있는거죠.
   강백호.shoot(); // 슬램덩크 슛

   인스턴스 클래스 정의

   public class 강백호 extends BasketBall{
    __constructor{
        shootInterface = new SlamdunkShoot();
        dribbleInterface = new RunDribble();
    }
   }

   public class 정대만 extends BasketBall{
    __constructor{
        shootInterface = new Point3Shoot();
        dribbleInterface = new RunDribble();
    }
   }

   public class 송태섭 extends BasketBall{
    __constructor{
        shootInterface = new LayupShoot();
        dribbleInterfade = new RunDribble();
    }
   }

   메인 클래스

   public class PlayBasketBall{
    BasketBall 강백호 = new 강백호();
    강백호.shoot(); // 슬램덩크 슛
    강백호.dribble(); // 달리기 드리블
   
    BasketBall 정대만 = new 정대만();
    정대만.shoot(); // 3점 슛
    정대만.dribble(); // 달리기 드리블
   
    BasketBall 송태섭 = new 송태섭();
    송태섭.shoot(); // 레이업 슛
    송태섭.dribble() // 풰이크 드리블
   
    // 기능 변경
    강백호.setShoot(new Point3Shoot());
    강백호.shoot(); // 3점슛
   }

   정리

   전략패턴이란 무언가(어떤 객체) 어떤 기능(행동)이 있을 때, 그 기능을 쉽게 수정하기 위해서, 해당 알고리즘을 직접 구현하지 않고 외부 클래스로 빼내서 그 일을 위임시키는 것이다. ex) 네비게이션 경로 검색

3. 걷기 도로

4. 대중교통

5. 자전거 도로 이처럼 네비게이션은 경로라는 기능을 검색하는데 이 중 어느하나를 선택한다. 이 때, 각각의 로직이 바뀔수도 있고, 추가될수도 있기 떄문에, 이걸 편히 하기위한 패턴이다.

SET, GET

SET hello "world" => OK GET hello => world

APPEND

APPEND animals "lion" => 4 GET animals => lion APPEND animals "tiger" => 9 GET animals => liontiger

redis command document

https://redis.io/commands 여기서 참고해주면 아주 좋습니다.

사실 command에는 많은 옵션과 속성들을 지정할 수 있는데, 이 참에 영어공부도 같이 해줍니다.

옵션 사용해보기

SET

SET order_id 2 EX 2 -> 2초 후에 사라짐. SET order_id 7 NX -> order_id가 없을때만 설정 SET order_id 8 GET -> 이전에 저장되어있던 값 return.

SETEX

SETEX color 2 "red" -> SET + EX 2초후에 사라짐

SETNX

SET color red => SET + NX

MSET

여러개 세팅할때 사용. MSET first test1 second test2 GET first => "test1" GET second => "test2"

MSETNX

추측가능...

GET

MGET

여러개 가져옵니다. MSET first test1 second test2 MGET first second => ["test1","test2"]

RANGE

SET model "audi" -> "audi" GETRANGE model 0 2 -> "aud", programming적 index가 적용됩니다.(0이 첫번째.) SETRANGE model 2 "to" -> 4, replace를 합니다. GET model -> "auto"

이벤트

• When to use Event https://stackoverflow.com/questions/48198189/when-to-use-events-in-laravel
• 특정 이벤트 객체 는 다수의 이벤트리스너 객체 와 연관된다고 생각하면 됩니다.
• 특정 이벤트가 발생하면 이 이벤트와 관련된 이벤트리스너 에서 원하는 로직들이 실행됩니다.

1. 이벤트 객체를 생성하고 php artisan make:event NewsLetterEvent
2. 위 이벤트발생시 실행할 이벤트 리스너를 생성하고 php artisan make:listen NewsLetterEventListener --event=NewsLetterEvent
3. EventServiceProvider에 등록을 해주면 됩니다.

   // EventServiceProvider.php
   ...
   protected $listen = [
    ...
    NewsletterEvent::class => [
            NewsletterEventListener::class,
            ... // 등록할 이벤트 리스너들 추가 목록
    ]
   ...

4. 실행은 event 헬퍼 함수를 통해 할 수 있습니다. event(new NewsletterEvent($email));

이메일

1. email 객체를 생성해 줍니다. php artisan make:mail Newsletter

   // Mail/Newsletter.php
   public function __construct($user)
   {
     $this->user = $user;
   }
   

public function build() { $public_path = public_path('images/golang.png');

return $this->subject($this->user['email'] . '의 회원가입을 축하합니다.')
    ->attach($public_path)
    ->view('mail.newsletter')
    ->with(['custom' => 'thank you thank you!']);

}

2. 메일 템플릿을 작성해 줍니다.
```php
// mail.newsletter.blade.php
<p>{{$user['email']}}님 안녕하세요!
</p>
<p>{{ $custom }}</p>
<img src="{{ $message->embed(public_path('images/docker_whale.png')) }}" alt="">

3. 실행합니다.

   $user = [
    'email' => $this->email
   ];
   

$mail = new Newsletter($user);

Mail::to($this->email)->send($mail);

### 큐
이메일 같이 경우 처리되는데 시간이 걸리는 작업들은 비동기로 처리하는게 유리합니다.
![](https://velog.velcdn.com/images/i_thank/post/d6fd96ab-49a2-4ff2-9287-0d6e64e63264/image.png)
1) 비동기 처리를 위해서는 `queue를 실행`해야합니다. 그러지 않으면 `job`들이 쌓이기만 하고 처리는 되지 않습니다.
`php artisan queue:work`

2) 먼저 `queue connection(queue driver)`을 설정해줍니다.

// .env QUEUE_CONNECTION=database

3) job들을 쌓을 `queue table`을 생성해 줍니다.
`php artisan queue:table`
`php artisan migrate`
![](https://velog.velcdn.com/images/i_thank/post/71b4bf31-6fda-4cf8-a1ed-17d8310df89c/image.png)
job을 쌓을 jobs 테이블과, 실패시 쌓이는 failed_jobs 테이블이 생성되었습니다.

4) 처리할 Job을 생성해 줍니다.
`php artisan make:job NewsletterJob`
```php
// NewsletterJob.php
public function __construct($email)
{
    $this->email = $email;
}

public function handle()
{
    $user = [
        'email' => $this->email
    ];

    $mail = new Newsletter($user);
    Mail::to($this->email)->send($mail);
}

이메일 보내는 처리를 적어 주었습니다.

로직 순서 정리

github source

https://github.com/kaelch/laravel8/tree/event

TextButton(
    child: Text('push navigate'),
    onPressed: (){
        Navigator.push(context,
            MaterialPageRoute(
                builder: (_) => SecondPage()
            )
        )
    }
)

Navigator.push(context, builder: (_) => SecondPage()) 부분이 핵심입니다. 여기서 잘못된 context 전달로 제대로 작동하지 않을 수 있습니다.

class SecondPage extends StatelessWidget {
  ...
  Widget build(BuildContext ctx) {
    return Scaffold(
        body: Center(
          child: ElevatedButton(
            child: Text('Back'),
            onPressed: (){
              Navigator.pop(ctx);
            },
          ),
        )
    );
  }
}

다시 되돌아갈때는, Navigator.pop(context)를 통해 구현할 수 있습니다.

2. MaterialApp Navigator

MaterialApp() 내부에서 라우트를 지정할 수 있습니다.

MaterialApp(
    initialRoute: '/',
    routes: {
        '/a': (context) => ScreenA(),
        '/b': (context) => ScreenB(),
        '/c': (context) => ScreenC()
    },
    home: ScreenA()
)

class ScreenA extends StatelessWidget {
  ...
  ElevatedButton(
      child: Text('Go to B')
      onPressed: (){
          Navigator.pushNamed(context, '/b');
      }, 
  ),
}

Navigator.pushNamed()를 통해 MaterialApp()에서 지정한 라우트로 이동할 수 있습니다.

redis db를 cloud로 만들고, test tool을통해 redis 테스트 환경을 간편히 조성합니다.

1. redis console

1. https://redis.com/ 로 접속합니다.

2. 로그인을 하게되면 redis console로 접속하게 됩니다.

• 

  3. 원하는 plan을 선택하고

• 
• 

Create subscription으로 생성합니다.

4. database를 생성해 줍니다.

Database name을 설정해주고 Activate database로 생성해 줍니다.

2. rbook console

쿼리를 날려볼 도구입니다.

1. https://rbook.cloud/ 로 접속합니다.

초라해 보이지만 강력하다고 합니다. New Notebook을 클릭합니다.

이전에 만들었던 redis database와 연결해야하니 Connect을 클릭해 줍니다.

이전에 생성했던 redis db의 정보를 적어줍니다.

• Host -> Public endpoint host(ex. redis-99999.c999.ap-south-1-1.ec2.cloud.redislabs.com)
• Port -> Public endpoint port(ex. 12345)
• Password -> Security부분 Default user password

Test 후 Save를 해줍니다.

완료 되었군요.

1. 비즈니스 로직에서 Laravel 함수인 notify(new SlackNotification())를 호출합니다.
2. notify()를 호출하면, SlackNotification에서 전처리 작업을 합니다.
3. Slack에 메세지가 나타납니다.

과정

1. Slack Notification 패키지를 설치합니다.

   composer require laravel/slack-notification-channel

2. Slack Notification을 만들어 줍니다.

   여기서 slack 알림 전처리 작업을 합니다.

   php artisan make:notification SlackNotification

  <?php
  namespace App\Notifications;
  use ...

  class SendNotification extends Notification
  {
      use Queueable;
      private $message;

      public function __construct($message)
      {
          $this->message = $message;
      }

      public function via($notifiable)
      {
          return ['slack'];
      }

      public function toSlack($notifiable): SlackMessage
     {
         return (new SlackMessage)
             ->from('Laravel')
             ->image('https://laravel.com/img/favicon/favicon.ico')
             ->content($this->message);
     }
  }

2-1. __constructor 에서 보낼 메세지를 설정했습니다. 2-2. via()에서default값인 mail 에서 slack으로 변경해줍니다. 2-3. 위에서 설치한 slack notification 패키지가 잘 설치 되면 toSlack을 사용 할 수있습니다. toMail 또한 toSlack으로 변경해 줍니다. 2-4. 여기서 매개변수인 $notifiable은 이후 알림을 보내기 위해 use Notifiable한 Model의 값을 가져옵니다.

   // Models/User.php
   class User extends Authenticatable
    {
        use Notifiable;
    }

   // NotificationController.php
   class NotificationController{
       public function slackNotification(){
           //Notifiable을 use한 Model인 user에서 notify를 호출할 수 있습니다.

           // 1. 한번 호출
           $user = User::first();
           $message = '라라벨이 말합니다.';
           $user->notify(new SlackNotification($message));

           // 2. 전부다 호출 
           $users = User::all();
           Notification::send($users, new SlackNotification($message));

           // 위에서 말한 매개변수인 $notifiable은 여기의 각 $user가 됩니다.
           // $message는 생성자의 인자로 사용 되겠지요.
       }
   }

3. Slack 설정파일을 설정합니다.

   3-1. 2022-7월 기준 Slack 찾아보기 에서 앱을 클릭해 줍니다. 3-2. incoming-webhook을 찾아 클릭해 줍니다. 3-3. Slack에 추가합니다. 3-4. 원하는 채널을 선택해 줍니다. 3-5. 웹 후크 URL의 모든 URL을 복사해 둡니다.

   <?php
   class User extends Authenticatable
   {
       use Notifiable;
   
       public function routeNotificationForSlack(): string
       {
           return config('services.notification.slack_webhook_url');
       }
   }
   
   // config/services.php
   // config에 추가
   'notification' => [
      'slack_webhook_url' => env('SLACK_WEBHOOK_URL'),
   ]
   //.env 에 추가
   SLACK_WEBHOOK_URL=https://hooks.slack.com/services...

4. ####라우트 등록 및 실행

   // web.php
   Route::get('/slack-notification', [NotificationController::class, 'slackNotification']);

   

   

원래 middleware는 요청 라우트의 비즈니스 로직(컨트롤러나 서비스) 들어가기 전에 무조건 먼저 전부다 실행되는 줄 알았는데 말이죠.

기본 미들웨어

public function handle(Request $request, Closure $next)
{
    return $next($request);
}

처음 middleware를 make 했을 때, 기본로직입니다.

변형 미들웨어

하지만 아래처럼 로직을 바꾸게 되면, Controller 내부 비즈니스 로직 실행 후에 middleware 로직을 실행 할 수 있습니다.

public function handle(Request $request, Closure $next)
{
//    return $next($request);
    $response = $next($request);
    return $response;
}

1. $response변수에 할당 후 반환.

// ExampleMiddleware.php

\Log::Debug('Middleware init'); // 1
\Log::Debug('Middleware before allocate response'); // 2
$response = $next($request);
\Log::Debug('Middleware after allocate response'); // 4
return $response;

// ExampleController.php

public function login($request): array
{
    \Log::Debug('in Controller'); //3
}

2. 그냥 바로 $request 반환.

// ExampleMiddleware.php

\Log::Debug('Middleware init'); // 1
\Log::Debug('Middleware before allocate response'); // 2
\Log::Debug('Middleware after allocate response'); // 3
return $next($request);

// ExampleController.php

public function login($request): array
{
    \Log::Debug('in Controller'); //4
}

매일 삽질만 하는 줄 알았는데, 개인적으로 신기한 걸 발견해서 기분이 좋았습니다.

설계

1. 첫번째 ACL 분류

1. 인사과은 /user에만 접근할수 있고,
2. 총무과는 /system,
3. 마케팅과는 /product에만 접속할 수 있습니다.

2. 두번째 ACL 세분화 분류

역할(role)과 접근권한(permission)으로 좀 더 세분화를 해보겠습니다.

각 부서는 3가지의 권한이 있는데

1. leader는 CRUD,
2. member는 CR,
3. intern은 R만 가능합니다.

즉, 유저가 권한이 없을 때는, 해당 접근이 불가능하게 해야 합니다.

3. table 관계도

3.1 role, permission

leader, member, intern은 role이고, CRUD에 관한건 permission입니다.

1개의 role은 다수의 permission을 가질 수 있고, 1개의 permission또한 다수의 role을 가질 수 있기 때문에 중간에 role_has_permission 테이블을 놓아서 다대다 관계를 형성하고 있습니다.

3.2 model has roles

각 유저가 어떤 역할을 가지고 있는지는 model_has_roles table로 관리합니다. 이러면 기존users table에 column을 추가할 필요없이(기존 테이블 수정없이) 적용이 가능합니다.

laravel-pemission 설정

1. 설치

composer require spatie/laravel-permission

2. 프로바이더 설정

선택사항입니다. 아래 providers 배열에 추가하지 않아도 자동으로 연결되지만,

현재 설치되어있는 패키지들을 명시적으로 표현해주고 싶어서 작성했습니다.

// config/app.php
'providers' => [
    // ...
    Spatie\Permission\PermissionServiceProvider::class,
];

3. 마이그레이션 파일 가져오기

새로운 테이블들을 생성하기 위한 마이그레이션 파일들을 로컬로 가져옵니다.

php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"

그러면 config/permission.php파일을 볼 수 있는데, 여기서 각 테이블에 대한 설정을 변경할 수 있습니다.

4. laravel-permission 테이블 생성

php artisan migrate config/permission.php를 토대로 table들이 생성됩니다.

1. roles
2. permissions
3. role_has_permissions
4. model_has_roles
5. model_has_permissions(여기에선 다루지 않습니다.)

3. 코드 작성

각 컨트롤러에 CRUD관련 function이 정의되어 있습니다.

각각의 role에 따라 function들의 접근을 막아야 합니다.

3-1. laravel-permission table 값들

현재 laravel-permission관련 table들의 값들입니다.

1. roles테이블에는 각 부서당 3가지의 role이 있고, 총 9개의 role이 있습니다.
2. permissions 테이블에는 현재 정의되어있는 기능들에 대한 permission이 있습니다.
3. role_has_permissions테이블에는 각 roles와 permissions를 연결해 주는 값들이 있습니다.
4. model_has_roles테이블에는 각 user가 가지고 있는 role을 정해주고 있습니다.

3-2 구현

인사과와 관련있는 1개만 예를 들겠습니다.(나머지 과도 다 똑같습니다.)

web.php에서 각 route에 middleware를 적용할 수도 있지만,

만약 기존 route가 resource로 되어있을 경우, 변경하기가 힘들어서

Controller내부의 constructor에서 middleware를 적용하였습니다.

class UserController extends Controller
{
    public function __construct()
    {
        $this->middleware('permission:/user r,web', ['only' => ['index']]);
        $this->middleware('permission:/user c,web', ['only' => ['store']]);
        $this->middleware('permission:/user u,web', ['only' => ['update']]);
        $this->middleware('permission:/user d,web', ['only' => ['destroy']]);
    }

각 role에 대한 middleware를 지정한 것이 아닌, permission에 대한 middlware를 지정한 것이 보입니다.

permission이 아닌 role에 집중을 하게 되면, 접근제한을 원활하게 할 수 없게됩니다. 위 공식문서에서도 permission으로 접근제한을 두라 말하고 있습니다.

https://spatie.be/docs/laravel-permission/v5/best-practices/roles-vs-permissions

permission middleware를 사용하기 위해 Kernel.php의 $routeMiddleware에 permission을 추가합니다.

protected $routeMiddleware = [
        ...
        'permission' => \Spatie\Permission\Middlewares\PermissionMiddleware::class,
    ];

3-3 테스트 코드 작성

auth가 구현되어 있지 않은 관계로 테스트코드를 작성하여 테스트했습니다.

<?php
namespace Tests\Feature;

use App\Models\User;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Foundation\Testing\WithFaker;
use Spatie\Permission\Models\Role;
use Tests\TestCase;

class PermissionTest extends TestCase
{
    public function masterDataProvider() {
        return array(
            array("personal_master","/user"),
            array("marketing_master","/product"),
            array("affairs_master","/system"),
        );
    }

    public function memberDataProvider() {
        return array(
            array("personal_member","/user"),
            array("marketing_member","/product"),
            array("affairs_member","/system"),
        );
    }

    public function internDataProvider() {
        return array(
            array("personal_intern","/user"),
            array("marketing_intern","/product"),
            array("affairs_intern","/system"),
        );
    }

    private function getUser($role)
    {
        $user = User::whereHas('roles', function($query) use($role){
            return $query->where('name', $role);
        })->with('roles')->first();
        $this->actingAs($user);
    }


    /**
     * @dataProvider masterDataProvider
     */
    public function test_role_master($role, $route)
    {
        $this->getUser($role);

        $this->get($route)->assertOk();
        $this->post($route)->assertOk();
        $this->patch($route.'/1')->assertOk();
        $this->delete($route.'/1')->assertOk();
    }

    /**
     * @dataProvider memberDataProvider
     */
    public function test_role_member($role, $route)
    {
        $this->getUser($role);

        $this->get($route)->assertOk();
        $this->post($route)->assertOk();
        $this->patch($route.'/1')->assertStatus(403);
        $this->delete($route.'/1')->assertStatus(403);
    }

    /**
     * @dataProvider internDataProvider
     */
    public function test_role_intern($role, $route)
    {
        $this->getUser($role);

        $this->get($route)->assertOk();
        $this->post($route)->assertStatus(403);
        $this->patch($route.'/1')->assertStatus(403);
        $this->delete($route.'/1')->assertStatus(403);
    }

}

4. 소스코드

https://github.com/kaelch/laravel8.git

1. php artisan db:seed 테이블 시딩
2. php artisan test 테스트

처음에 했던 id: 75인 2014_10_12_000000_create_users_table을 롤백하려 합니다.

2. batch 컬럼을 수정해줍니다.

batch값을 가장큰 3으로 변경해 주었습니다.

3. php artisan migrate:rollback --step=1 으로 롤백 해줍니다.

잘되는군요.

4. php artisan migrate 으로 변경하고자 했던 테이블을 마이그레이션 합니다.

사전 요구사항

• React 기본
• Hooks

Context API의 이유

• Context API는 property 들을 매우 자식(손자, 증손자급)에게 전달할때 props 로 전달하는 번거로움을 제거할 수 있습니다.

목표

• Context API 사용하기 전과 후를 살펴보고 이걸 왜 써야하는지 몸과 마음으로 느끼기

- Context API를 사용하기 전 props를 전달 예시

• App
  • Header
    • Nav

- 구조는 이렇습니다.

가장 하위인 <Nav> 에서 "Draven"을 출력하는데 이 값은 할아버지격 인 <App>에서 가져옵니다. 하지만 <Nav>는 <Header>하위에 있으므로, <Header> 에도 props를 받아와야 합니다. 즉, 쓸데없는 props={props} 때문에 코드가 아주 지저분 해집니다.

# src/App.js
const App = () => {
  const champion = {
    name: "Draven",
    characteristic: "dirty"
  };

  return (
    <>
      <Header user={champion} />
    </>
  );
};

# src/Header.js
src/Header.js
const Header = ({ user }) => {
  return (
    <>
      <Nav user={user} />
    </>
  );
};

# src/Nav.js
const Nav = ({ user }) => {
  return <>{user.name}</>;
};

결과 = Draven

즉, 손자인 Nav에서 할아버지의 property를 가져오려면 엄마의 props로 가져오는 와야합니다. 근대 만약 97개라면? 네 97대의 자손 모두에게 props를 가져와야 겠죠. 그럼 96번의 user={user}를...

근데 Context API를 통해 props를 여러번 가져오지 않고도 property들을 가져 올 수 있습니다.

문제해결

inc를 누르면 증가하고 dec를 누르면 감소합니다. https://codesandbox.io/s/contextapihooks-mumli(결과확인) 컴포넌트 구조는 Context API와 관련 된 것을 제외하고 아래와 같습니다.

• App
  • Red
    • Blue
      • Green

기존대로 라면 Blue영역과 Green영역에 사용할 함수와 데이터를 props로 넘겨줘야 합니다.

<App>
    <Red>
        <Blue buttonClick={buttonClick}>
            <Green data={data}></Green>
        </Blue>
    </Red>
</App>
<!--물론 코딩은 저렇게 하지않고 각 컴포넌트에서 하위 컴포넌트를 호출 했습니다.
(위 링크에서 확인하시면 좋습니다.)-->

• 디렉터리 구조

• src/context : state를 저장하는 컴포넌트를 만들기위해 의 상위인 createContext를 만들 파일입니다

• src/components/ColorProvider : 위에서 만든 createContext를 호출하여 create.Provider를 만들고 state와 setState를 정의합니다

• src/components/그외 것들 : View 컴포넌트들입니다.

1. createContext만들기

/src/context/Color.context.js

About Color.context.js

• store의 저장소인 Provider, 즉 <Context.Provider>를 만들기 위해 Context를 만듭니다.

//createContext를 import 해줍니다.
import { createContext } from "react";

//직접 우리가 
const ColorContext = createContext({
//사실 여기 안에있는 데이터는 삭제해도 됩니다.
//왜냐면 ColorContext.Provider에서 state를 관리 할 거라서요.
//하지만 관리할 state가 무엇이 있는지 확인하기 좋습니다.
//그러기에 지우지 않는것을 추천합니다.

//우리가 관리할 state입니다.
  number: 0,
  increase: () => {},
  decrease: () => {}
});

export default ColorContext;

2. Provider만들기

state를 모아둔 것을 Provider(store)라 생각하면 됩니다.

/src/component/ColorProvider.component.js

About "ColorProvider.component.js"

• export 되는 <ColorProvider>가 하는일

  1. 하위에서 사용 할 state와 setState를 정의합니다. 2. state를 관리할 store를 만들기 위해 creactContext 를 받아와서 ColorContext.Provider 를 return 합니다. .

import React, { useState } from "react";
import ColorContext from "../../context/Color.context";

//이 페이지의 특징은 함수같은 것들을 먼저 정의하고 
//useState를 통한 state 및 setState를 나중에 했다는 것입니다.
//여기서 Hook에 관한 이해가 필요합니다.
//생각보다 바로 이해하기 어려우니 심사숙고하며 보는걸 추천합니다.

//사용하고자 하는 컴포넌트 최상위에 지정할 Provider컴포넌트 입니다.  
const ColorProvider = ({ children }) => {

//우리가 Blue에서 사용할 함수입니다.
  const increase = () => {
//그 함수안에서 Hooks의 setNumber()를 사용 했습니다.
//prevState를 받아서 return을 통해 state를 업데이트 합니다.  
    setNumber(prevState => {
      return {
        ...prevState,
        number: prevState.number + 1
      };
    });
  };

  const decrease = () => {
    setNumber(prevState => {
      return {
        ...prevState,
        number: prevState.number - 1
      };
    });
  };

//state초기화 객체 입니다.
  const initialState = {
    number: 0,
    increase,
    decrease
  };
//Hook을 통한 state, setState를 정의합니다.
  const [number, setNumber] = useState(initialState);

  return (  
//ColorProvider에 state를 사용할 컴포넌트들을 호출하려면
//{children}이 있어야 합니다
//그래서 마지막 return에서 {children}을 리턴해줍니다.
    <ColorContext.Provider value={number}>
      {children}
      </ColorContext.Provider>
  );
};

export default ColorProvider;

3. 하위 컴포넌트에서 useContext()를 통해 Provider의 state사용하기.

1. src/components/App.js

import React from "react";
//state를 사용하기 위해 앞에서 만든 Provider를 가져옵니다.  
import ColorProvider from "./ColorProvider/ColorProvider.component";
import Red from "./Red";
const App = () => {
  return (
//사용하고자 하는 자식들 컴포넌트들 가장 밖에서 <Provider>로 감싸줍니다.
    <ColorProvider>
      <Red />
    </ColorProvider>
  );
};
export default App;

2. src/components.Red.js

• return으로 <Blue>컴포넌트를 호출한게 다 입니다.

import React from "react";
import Blue from "./Blue";
import "./App.css";

const Red = () => {
  return (
    <div className="red">
      <Blue>Blue</Blue>
    </div>
  );
};

export default Red;

3. src/components/Blue.js

• 여기서 increase와 decrease를 사용하기 위해 가장 상위에서 state의 함수를 가져옵니다.

//저장소를 가져오기위해 useContext를 import합니다.  
import React, { useContext } from "react";
import ColorContext from "../context/Color.context";
import Green from "./Green";
import "./App.css";

const Blue = () => {
//원하는 함수를 useContext(Context)로 불러옵니다.  
  const { increase, decrease } = useContext(ColorContext);
  return (
    <div className="blue">
      //그리고 아래와 같이 사용하면 됩니다.
      <button className="increment" onClick={increase}>
        inc
      </button>
      <button className="decrement" onClick={() => decrease()}>
        dec
      </button>
      <Green>green</Green>
    </div>
  );
};

export default Blue;

4. src/components/Green.js

//마찬가지로 useContext를 import합니다.  
import React, { useContext } from "react";
import ColorContext from "../context/Color.context";
import "./App.css";
const Green = () => {
//useContext(Context)를 사용하여 사용할 준비를 합니다.  
  const value = useContext(ColorContext);
  return (
    <div className="green">
      //정의했던 state.변수명을 사용해 주면 됩니다.
      <span className="number">{value.number}</span>
    </div>
  );
};
export default Green;

정리

1. React Context API는 props로 여러차례 전달 해야하는 번거러옴을 줄일수 있습니다.

2. 그러면 결국 유지보수에 큰 이점이 됩니다.

3. 그렇다는건 정신건강에 또한 큰 이점이 된다는 것입니다.